From 0040ac91ae221e9b2c94ee1994d312ea57e95614 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Wed, 19 Jan 2022 17:24:56 +0100
Subject: [PATCH] update media picker

---
 .../modules/media/overlays/media - Copy.vue   | 194 +++++++++++++++
 .../app/modules/media/overlays/media.vue      | 230 +++++++++++++-----
 2 files changed, 365 insertions(+), 59 deletions(-)
 create mode 100644 zero.Backoffice.UI/app/modules/media/overlays/media - Copy.vue

diff --git a/zero.Backoffice.UI/app/modules/media/overlays/media - Copy.vue b/zero.Backoffice.UI/app/modules/media/overlays/media - Copy.vue
new file mode 100644
index 00000000..47a34550
--- /dev/null
+++ b/zero.Backoffice.UI/app/modules/media/overlays/media - Copy.vue	
@@ -0,0 +1,194 @@
+<template>
+  <ui-trinity class="media-overlay">
+    <template v-slot:header>
+      <ui-header-bar title="'@media.name'" :close-button="true" @close="config.close">
+        <template v-slot:title>
+          <h2 class="ui-header-bar-title">
+            <span class="media-items-hierarchy-item">
+              <button type="button" v-localize="'@media.name'" @click="selectItem('root')"></button>
+              <ui-icon class="-chevron" v-if="hierarchy.length > 0" symbol="fth-chevron-right" />
+            </span>
+            <span v-for="(item, index) in hierarchy" :key="item.id" class="media-items-hierarchy-item">
+              <button type="button" v-localize="item.name" @click="selectItem(item.id)"></button>
+              <ui-icon class="-chevron" v-if="index < hierarchy.length - 1" symbol="fth-chevron-right" />
+            </span>
+          </h2>
+        </template>
+      </ui-header-bar>
+    </template>
+    <template v-slot:footer>
+      <ui-button type="light onbg" label="@ui.close" @click="config.close" />
+    </template>
+
+    <div v-if="loaded">
+      <div class="media-items" :class="{ 'is-selecting': selected.length > 0 }">
+        <ui-datagrid ref="grid" v-model="gridConfig" @select="onSelected" @count="count = $event">
+
+          <template v-slot:before>
+            <media-drop :folder-id="id" @completed="refresh" />
+          </template>
+
+          <template v-if="selected.length < 1" v-slot:actions="props">
+            <template v-if="props.item && props.item.isFolder">
+              <ui-dropdown-button label="@ui.rename.title" icon="fth-edit-2" @click="editFolder(props.item)" />
+              <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move([props.item])" />
+              <ui-dropdown-button label="@ui.selection.select" icon="fth-check-circle-2" @click="$refs.grid.select(props.item)" />
+              <ui-dropdown-separator />
+              <ui-dropdown-button label="@ui.delete" icon="fth-trash" @click="remove([props.item])" />
+            </template>
+            <template v-if="props.item && !props.item.isFolder">
+              <ui-dropdown-button label="@ui.open.title" icon="fth-arrow-right" @click="goToFolder(props.item.id)" />
+              <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move([props.item])" />
+              <ui-dropdown-button label="@ui.selection.select" icon="fth-check-circle-2" @click="$refs.grid.select(props.item)" />
+              <ui-dropdown-separator />
+              <ui-dropdown-button label="@ui.delete" icon="fth-trash" @click="remove([props.item])" />
+            </template>
+          </template>
+
+          <template v-slot:default="props">
+            <media-item :value="props.item" :selected="props.selected" @click="onItemClick" />
+          </template>
+        </ui-datagrid>
+      </div>
+    </div>
+    <ui-loading v-else />
+  </ui-trinity>
+</template>
+
+
+<script>
+  import api from '../api';
+  import MediaItem from '../pages/overview/overview-item.vue';
+  import MediaSelection from '../pages/overview/overview-selection.vue';
+  import MediaDrop from '../pages/overview/drop.vue';
+  //import MediaFolderApi from 'zero/api/media-folder.js';
+  //import MediaApi from 'zero/api/media.js';
+  //import Notification from 'zero/helpers/notification.js'
+
+  export default {
+
+    props: {
+      model: Object,
+      config: Object
+    },
+
+    components: { MediaItem, MediaSelection, MediaDrop },
+
+    data: () => ({
+      id: null,
+      hierarchy: {},
+      search: null,
+      selected: [],
+      gridConfig: {
+        search: null,
+        width: 180,
+        selectable: true,
+        items: null,
+        setQuery: false,
+        scrollContainer: null
+      },
+    }),
+
+
+    created()
+    {
+      this.gridConfig.items = this.getItems;
+      this.gridConfig.scrollContainerSelector = '.media-overlay content';
+      this.id = this.config.parentId || 'root';
+      this.loaded = true;
+    },
+
+
+    methods: {
+
+      async getItems(query)
+      {
+        if (!query)
+        {
+          query = {};
+        }
+
+        query.search = this.gridConfig.search;
+        query.pageSize = 50;
+
+        const hierarchy = await api.folders.getHierarchy(this.id);
+        this.hierarchy = hierarchy.data;
+
+        return await api.folders.getChildren(this.id, true, query);
+      },
+
+
+      async refresh()
+      {
+        await this.$refs.grid.update();
+      },
+
+
+      async onItemClick(item)
+      {
+        if (item.isFolder)
+        {
+          await this.selectItem(item.id);
+        }
+        else
+        {
+          this.config.confirm(item);
+        }
+      },
+
+
+      async selectItem(id)
+      {
+        this.id = id;
+        await this.refresh();
+      },
+
+
+      onSelected(selection)
+      {
+        this.selected = selection;
+      },
+
+
+      clearSelection()
+      {
+        if (this.$refs.grid)
+        {
+          this.$refs.grid.clearSelection();
+        }
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss">
+  .media-items-hierarchy-item
+  {
+    font-family: var(--font);
+    margin: 0;
+    font-size: var(--font-size-l);
+    font-weight: 400;
+    color: var(--color-text-dim);
+    min-height: 22px;
+    display: flex;
+    align-items: center;
+
+    button
+    {
+      color: var(--color-text-dim);
+      font-size: var(--font-size-l);
+    }
+
+    &:last-child button
+    {
+      font-weight: 700;
+      color: var(--color-text);
+    }
+
+    button:hover
+    {
+      color: var(--color-text);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Backoffice.UI/app/modules/media/overlays/media.vue b/zero.Backoffice.UI/app/modules/media/overlays/media.vue
index b4001587..475580c4 100644
--- a/zero.Backoffice.UI/app/modules/media/overlays/media.vue
+++ b/zero.Backoffice.UI/app/modules/media/overlays/media.vue
@@ -1,71 +1,73 @@
 <template>
   <ui-trinity class="media-overlay">
     <template v-slot:header>
-      <ui-header-bar title="Select media" :close-button="true" @close="config.close">
+      <ui-header-bar :close-button="true" @close="config.close(true)">
         <template v-slot:title>
           <h2 class="ui-header-bar-title">
             <span class="media-items-hierarchy-item">
-              <button type="button" v-localize="'@media.name'" @click="selectItem('root')"></button>
-              <ui-icon class="-chevron" v-if="hierarchy.length > 0" symbol="fth-chevron-right" />
+              <button type="button" v-localize="'@media.name'" @click="selectItem(null)"></button>
+              <ui-icon class="-chevron" v-if="hierarchy.length > 0 || searchMode" symbol="fth-chevron-right" />
             </span>
             <span v-for="(item, index) in hierarchy" :key="item.id" class="media-items-hierarchy-item">
               <button type="button" v-localize="item.name" @click="selectItem(item.id)"></button>
-              <ui-icon class="-chevron" v-if="index < hierarchy.length - 1" symbol="fth-chevron-right" />
+              <ui-icon class="-chevron" v-if="index < hierarchy.length - 1 || searchMode" symbol="fth-chevron-right" />
             </span>
           </h2>
         </template>
+
+        <template v-if="selected.length < 1">
+          <ui-search v-model="search" class="onbg" />
+          <ui-button :disabled="searchMode" type="accent" label="@media.addfolder" @click="editFolder()" />
+        </template>
+        <media-selection v-else :selected="selected" @clear="clearSelection" @move="move" @remove="remove" />
       </ui-header-bar>
     </template>
+
     <template v-slot:footer>
       <ui-button type="light onbg" label="@ui.close" @click="config.close" />
     </template>
 
-    <div v-if="loaded">
-      <div class="media-items" :class="{ 'is-selecting': selected.length > 0 }">
-        <ui-datagrid ref="grid" v-model="gridConfig" @select="onSelected" @count="count = $event">
+    <div v-if="loaded" class="media-items" :class="{ 'is-selecting': selected.length > 0 }">
+      <ui-datagrid ref="grid" v-model="gridConfig" @select="onSelected" @count="count = $event">
 
-          <template v-slot:before>
-            <media-drop :folder-id="id" @completed="refresh" />
-          </template>
+        <template v-slot:before>
+          <media-drop v-if="!searchMode" :folder-id="parentId" @completed="refresh" />
+        </template>
 
-          <template v-if="selected.length < 1" v-slot:actions="props">
-            <template v-if="props.item && props.item.isFolder">
-              <ui-dropdown-button label="@ui.rename.title" icon="fth-edit-2" @click="editFolder(props.item)" />
-              <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move([props.item])" />
-              <ui-dropdown-button label="@ui.selection.select" icon="fth-check-circle-2" @click="$refs.grid.select(props.item)" />
-              <ui-dropdown-separator />
-              <ui-dropdown-button label="@ui.delete" icon="fth-trash" @click="remove([props.item])" />
-            </template>
-            <template v-if="props.item && !props.item.isFolder">
-              <ui-dropdown-button label="@ui.open.title" icon="fth-arrow-right" @click="goToFolder(props.item.id)" />
-              <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move([props.item])" />
-              <ui-dropdown-button label="@ui.selection.select" icon="fth-check-circle-2" @click="$refs.grid.select(props.item)" />
-              <ui-dropdown-separator />
-              <ui-dropdown-button label="@ui.delete" icon="fth-trash" @click="remove([props.item])" />
-            </template>
+        <template v-if="selected.length < 1" v-slot:actions="props">
+          <template v-if="props.item && props.item.isFolder">
+            <ui-dropdown-button label="@ui.rename.title" icon="fth-edit-2" @click="editFolder(props.item)" />
+            <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move([props.item])" />
+            <ui-dropdown-button label="@ui.selection.select" icon="fth-check-circle-2" @click="$refs.grid.select(props.item)" />
+            <ui-dropdown-separator />
+            <ui-dropdown-button label="@ui.delete" icon="fth-trash" @click="remove([props.item])" />
           </template>
+          <template v-if="props.item && !props.item.isFolder">
+            <ui-dropdown-button label="@ui.move.title" icon="fth-corner-down-right" @click="move([props.item])" />
+            <ui-dropdown-button label="@ui.selection.select" icon="fth-check-circle-2" @click="$refs.grid.select(props.item)" />
+            <ui-dropdown-separator />
+            <ui-dropdown-button label="@ui.delete" icon="fth-trash" @click="remove([props.item])" />
+          </template>
+        </template>
 
-          <template v-slot:default="props">
-            <media-item :value="props.item" :selected="props.selected" @click="onItemClick" />
-          </template>
-        </ui-datagrid>
-      </div>
+        <template v-slot:default="props">
+          <media-item :value="props.item" :selected="props.selected" @click="onItemClick" />
+        </template>
+      </ui-datagrid>
     </div>
-    <ui-loading v-else />
   </ui-trinity>
 </template>
 
-
-<script>
+<script lang="ts">
+  import { defineComponent } from 'vue';
   import api from '../api';
   import MediaItem from '../pages/overview/overview-item.vue';
   import MediaSelection from '../pages/overview/overview-selection.vue';
   import MediaDrop from '../pages/overview/drop.vue';
-  //import MediaFolderApi from 'zero/api/media-folder.js';
-  //import MediaApi from 'zero/api/media.js';
-  //import Notification from 'zero/helpers/notification.js'
+  import actions from '../pages/overview/overview-actions';
+  import * as overlays from '../../../services/overlay';
 
-  export default {
+  export default defineComponent({
 
     props: {
       model: Object,
@@ -75,26 +77,52 @@
     components: { MediaItem, MediaSelection, MediaDrop },
 
     data: () => ({
-      id: null,
-      hierarchy: {},
+      loaded: false,
+      paging: {},
+      hierarchy: [],
       search: null,
       selected: [],
+      parentId: null,
       gridConfig: {
-        search: null,
         width: 180,
         selectable: true,
-        items: null,
-        setQuery: false,
-        scrollContainer: null
+        items: null
       },
     }),
 
 
-    created()
+    computed: {
+      id()
+      {
+        return this.parentId || 'root';
+      },
+      searchMode()
+      {
+        return !!this.search;
+      }
+    },
+
+
+    watch: {
+      parentId: function (val)
+      {
+        this.clearSelection();
+      },
+      search(val)
+      {
+        if (this.loaded && this.$refs.grid)
+        {
+          this.$refs.grid.search(val);
+        }
+      }
+    },
+
+
+    mounted()
     {
+      this.parentId = this.config.parentId;
       this.gridConfig.items = this.getItems;
       this.gridConfig.scrollContainerSelector = '.media-overlay content';
-      this.id = this.config.parentId || 'root';
       this.loaded = true;
     },
 
@@ -108,22 +136,23 @@
           query = {};
         }
 
-        query.search = this.gridConfig.search;
         query.pageSize = 50;
 
-        const hierarchy = await api.folders.getHierarchy(this.id);
-        this.hierarchy = hierarchy.data;
+        if (!query.search || !this.hierarchy.length)
+        {
+          const hierarchy = await api.folders.getHierarchy(this.id);
+          this.hierarchy = hierarchy.data;
+        }
+
+        if (query.search)
+        {
+          return await api.search(this.search, this.id, query);
+        }
 
         return await api.folders.getChildren(this.id, true, query);
       },
 
 
-      async refresh()
-      {
-        await this.$refs.grid.update();
-      },
-
-
       async onItemClick(item)
       {
         if (item.isFolder)
@@ -139,11 +168,29 @@
 
       async selectItem(id)
       {
-        this.id = id;
+        console.info(id);
+        this.parentId = id;
         await this.refresh();
       },
 
 
+      async refresh()
+      {
+        await this.$refs.grid.update();
+      },
+
+
+      getLink(item)
+      {
+        if (item.isFolder)
+        {
+          return { name: 'media', params: { parentId: item.id } };
+        }
+
+        return { name: 'media-edit', params: { id: item.id } };
+      },
+
+
       onSelected(selection)
       {
         this.selected = selection;
@@ -158,37 +205,102 @@
         }
       },
 
+
+      async move(items: any[])
+      {
+        const updates = await actions.move(items);
+        if (updates)
+        {
+          this.clearSelection();
+          await this.$refs.grid.update();
+        }
+      },
+
+
+      async remove(items: any[])
+      {
+        const deletes = await actions.remove(items);
+        if (deletes)
+        {
+          this.clearSelection();
+          await this.$refs.grid.update();
+        }
+      },
+
+
+      async editFolder(item)
+      {
+        const result = await overlays.open({
+          component: () => import('./editfolder.vue'),
+          model: item || { parentId: this.parentId },
+          display: 'dialog'
+        });
+
+        if (result.eventType === 'confirm' && result.value)
+        {
+          await this.$refs.grid.update();
+        }
+
+        //.then(item => this.goToFolder(item.model.id));
+      }
     }
-  }
+
+  });
 </script>
 
+
+
 <style lang="scss">
+  .media
+  {
+    width: 100%;
+    height: 100vh;
+    overflow-y: auto;
+  }
+
+  .media-content
+  {
+    height: 100vh;
+    overflow-y: auto;
+  }
+
   .media-items-hierarchy-item
   {
     font-family: var(--font);
     margin: 0;
-    font-size: var(--font-size-l);
+    font-size: var(--font-size-xl);
     font-weight: 400;
     color: var(--color-text-dim);
     min-height: 22px;
     display: flex;
     align-items: center;
 
+    a, button
+    {
+      color: var(--color-text-dim);
+    }
+
     button
     {
       color: var(--color-text-dim);
       font-size: var(--font-size-l);
     }
 
-    &:last-child button
+    &:last-child a, &:last-child button
     {
       font-weight: 700;
       color: var(--color-text);
     }
 
-    button:hover
+    a:hover, button:hover
     {
       color: var(--color-text);
     }
+
+    a .ui-icon, button .ui-icon
+    {
+      position: relative;
+      top: 2px;
+    }
   }
 </style>
\ No newline at end of file