swcs/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first tries for linkpicker

Browse Source
This commit is contained in:
Tobias Klika
2021-02-09 16:00:43 +01:00
parent 83db36b8d6
commit 0a1ae40ff4
13 changed files with 170 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Web.UI/App/components/pickers/linkPicker/areas/media.vue
+22
View File
@@ -0,0 +1,22 @@
<template>
<div class="ui-linkpicker-area-media">
media
</div>
</template>
<script>
export default {
name: 'uiLinkpickerAreaMedia',
props: {
value: {
type: [Object, Array],
default: null
}
}
}
</script>
<style lang="scss">
</style>
zero.Web.UI/App/components/pickers/linkPicker/areas/pages.vue
+95
View File
@@ -0,0 +1,95 @@
<template>
<div v-if="area" class="ui-linkpicker-area-pages">
<ui-property :vertical="true">
<ui-search v-model="search" />
</ui-property>
<ui-property :vertical="true">
<ui-tree ref="tree" v-bind="treeConfig" :get="getTreeItems" @select="onSelect" class="ui-linkpicker-area-pages-tree" />
</ui-property>
</div>
</template>
<script>
import PageTreeApi from 'zero/api/page-tree.js';
import { debounce as _debounce } from 'underscore';
export default {
name: 'uiLinkpickerAreaPages',
props: {
value: {
type: Object,
required: true
},
area: {
type: Object,
required: true
}
},
data: () => ({
treeConfig: {
parent: null,
active: null
},
search: null,
debouncedSearch: null
}),
watch: {
search()
{
this.debouncedSearch();
}
},
mounted()
{
this.debouncedSearch = _debounce(() => this.$refs.tree.refresh(), 300);
},
methods: {
onSelect(item)
{
this.value.values = {
id: item.id
};
this.$emit('change', this.value);
},
getTreeItems(parent)
{
return PageTreeApi.getChildren(parent, null, this.search).then(res =>
{
res = res.filter(x => x.id !== 'recyclebin');
res.forEach(item =>
{
//if (item.id === this.model)
//{
// item.isSelected = true;
//}
item.hasActions = false;
});
return res;
});
},
}
}
</script>
<style>
.ui-linkpicker-area-pages-tree
{
margin: 0 -32px 0;
}
.ui-linkpicker-area-pages-tree .ui-tree-item.is-selected,
.ui-linkpicker-area-pages-tree .ui-tree-item:hover:not(.is-disabled)
{
background: var(--color-tree-selected);
}
</style>
zero.Web.UI/App/components/pickers/linkPicker/linkpicker.vue
+19 -2
View File
@@ -7,7 +7,7 @@
<ui-icon-button v-if="!disabled" @click="remove(preview.id)" icon="fth-x" title="@ui.close" />
</div>
</div>-->
<ui-select-button v-if="canAdd" icon="fth-plus" :label="limit > 1 ? '@ui.add' : '@ui.select'" @click="pick()" :disabled="disabled" />
<ui-select-button v-if="canAdd" icon="fth-plus" :label="limit > 1 ? '@ui.add' : '@ui.select'" @click="onPick()" :disabled="disabled" />
</div>
</template>
@@ -130,6 +130,23 @@
},
onPick(id)
{
this.pick(id).then(res =>
{
if (this.limit > 1)
{
this.value.push(res);
this.onChange(this.value);
}
else
{
this.onChange(res);
}
});
},
pick(id)
{
if (this.disabled)
@@ -169,7 +186,7 @@
justify-content: space-between;
align-items: center;
.ui-icon-button
.ui-icon-button
{
height: 24px;
width: 24px;
zero.Web.UI/App/components/pickers/linkPicker/overlay.vue
+7 -105
View File
@@ -5,6 +5,7 @@
</template>
<template v-slot:footer>
<ui-button type="light onbg" :label="config.closeLabel" :parent="config.rootId" @click="config.hide" />
<ui-button type="primary" label="@ui.confirm" @click="onSave" />
</template>
<div v-if="opened">
@@ -32,31 +33,18 @@
</div>
<div class="ui-box">
<ui-property :vertical="true">
<ui-search v-model="search" />
</ui-property>
<ui-property :vertical="true">
<div class="ui-linkpicker-overlay-items" v-if="area">
<ui-tree v-if="area.display === 'tree'" ref="tree" v-bind="treeConfig" :get="getTreeItems" @select="treeConfig.onSelect" />
</div>
</ui-property>
<component v-if="area && area.component" :is="area.component" :area="area" :value="link" />
</div>
</div>
<!--<div v-if="opened" class="ui-box ui-linkpicker-overlay-items">
<ui-tree ref="tree" :get="getItems" :parent="config.rootId" @select="onSelect" />
</div>-->
</ui-overlay-editor>
</template>
<script>
import PageTreeApi from 'zero/api/page-tree.js'
import { debounce as _debounce } from 'underscore';
export default {
props: {
model: String,
model: Object,
config: Object
},
@@ -66,12 +54,6 @@
area: null,
areas: [],
areaItems: [],
treeConfig: {
parent: null,
active: null,
onSelect: (ev) => { console.info(JSON.parse(JSON.stringify(ev))); }
},
search: null,
link: null,
template: {
area: null,
@@ -88,18 +70,12 @@
current()
{
this.reloadSelector();
},
search()
{
this.debouncedSearch();
}
},
mounted()
{
this.debouncedSearch = _debounce(() => this.$refs.tree.refresh(), 300);
this.areas = this.zero.config.linkPicker.areas;
this.areaItems = this.areas.map(x =>
{
@@ -111,7 +87,7 @@
this.area = this.areas[0];
this.current = this.area.alias;
this.link = JSON.parse(JSON.stringify(this.template));
this.link = JSON.parse(JSON.stringify(this.model || this.template));
this.link.area = this.current;
setTimeout(() => this.opened = true, 300);
@@ -123,61 +99,13 @@
reloadSelector()
{
this.area = this.areas.find(x => x.alias === this.current);
if (!this.opened)
{
return;
}
if (this.area.display === 'tree' && this.$refs.tree)
{
this.$refs.tree.refresh();
}
else if (this.area.display === 'list')
{
}
else if (this.area.display === 'media')
{
}
else
{
// custom
}
},
onSelect(item)
onSave()
{
this.config.confirm(item);
this.config.confirm(this.link);
},
// get list items
getListItems(search)
{
},
// get tree items
getTreeItems(parent)
{
return PageTreeApi.getChildren(parent, null, this.search).then(res =>
{
res = res.filter(x => x.id !== 'recyclebin');
res.forEach(item =>
{
if (item.id === this.model)
{
item.isSelected = true;
}
item.hasActions = false;
});
return res;
});
},
onTargetChange(ev)
{
this.link.target = ev ? 'blank' : 'default';
@@ -186,7 +114,7 @@
}
</script>
<style lang="scss">
<style>
.ui-linkpicker-overlay-area
{
margin-bottom: var(--padding-s);
@@ -241,30 +169,4 @@
{
padding-top: 1px;
}
.ui-linkpicker-overlay-items > .ui-tree
{
margin: 0 -32px 0;
}
.ui-linkpicker-overlay-items .ui-tree-item.is-selected, .ui-linkpicker-overlay-items .ui-tree-item:hover:not(.is-disabled)
{
background: var(--color-tree-selected);
}
/*.ui-linkpicker-overlay-items .ui-tree-item.is-selected
{
&:after
{
font-family: "Feather";
content: "\e83e";
font-size: 16px;
color: var(--color-primary);
}
.ui-tree-item-text
{
font-weight: bold;
}
}*/
</style>
zero.Web.UI/App/config/zero.config.js
+1 -12
View File
@@ -15,17 +15,6 @@ export default {
},
linkPicker: {
areas: [
{
alias: 'zero.pages',
name: '@zero.config.linkareas.pages',
display: 'tree'
},
{
alias: 'zero.media',
name: '@zero.config.linkareas.media',
display: 'media'
}
]
areas: []
}
}
zero.Web.UI/App/core/link-area.js
+12
View File
@@ -0,0 +1,12 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var LinkArea = /** @class */ (function () {
function LinkArea(alias, label, component) {
this.alias = alias;
this.label = label;
this.component = component;
}
return LinkArea;
}());
exports.default = LinkArea;
//# sourceMappingURL=link-area.js.map
zero.Web.UI/App/core/link-area.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"file":"link-area.js","sourceRoot":"","sources":["link-area.ts"],"names":[],"mappings":";;AACA;IAME,kBAAY,KAAK,EAAE,KAAK,EAAE,SAAS;QAEjC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IACH,eAAC;AAAD,CAAC,AAZD,IAYC;AAGD,kBAAe,QAAQ,CAAC"}
zero.Web.UI/App/core/link-provider.js
-32
View File
@@ -1,32 +0,0 @@
//import MediaApi from 'zero/api/media.js';
//import Strings from 'zero/helpers/strings.js';
//import Localization from 'zero/helpers/localization.js';
//class LinkProvider
//{
// key;
// label;
// icon;
// autoclose = true;
// action = () =>
// {
// console.warn(`[zero] A list action needs a "action" callback`);
// };
// constructor(alias: string, name: string, type: string)
// {
// this.key = key;
// this.label = label;
// this.icon = icon;
// this.action = action;
// }
// /**
// * Calls the action
// * @returns {ListColumn}
// */
// call(options)
// {
// console.info(options);
// this.action(options);
// }
//}
//export default ListAction;
//# sourceMappingURL=link-provider.js.map
zero.Web.UI/App/core/link-provider.js.map
-1
View File
@@ -1 +0,0 @@
{"version":3,"file":"link-provider.js","sourceRoot":"","sources":["link-provider.ts"],"names":[],"mappings":"AACA,2CAA2C;AAC3C,gDAAgD;AAChD,0DAA0D;AAE1D,oBAAoB;AACpB,GAAG;AACH,QAAQ;AACR,UAAU;AACV,SAAS;AACT,qBAAqB;AACrB,kBAAkB;AAClB,KAAK;AACL,qEAAqE;AACrE,MAAM;AAEN,0DAA0D;AAC1D,KAAK;AACL,qBAAqB;AACrB,yBAAyB;AACzB,uBAAuB;AACvB,2BAA2B;AAC3B,KAAK;AAEL,OAAO;AACP,uBAAuB;AACvB,4BAA4B;AAC5B,OAAO;AACP,iBAAiB;AACjB,KAAK;AACL,4BAA4B;AAC5B,2BAA2B;AAC3B,KAAK;AACL,GAAG;AAGH,4BAA4B"}
zero.Web.UI/App/core/link-provider.ts
-37
View File
@@ -1,37 +0,0 @@
//import MediaApi from 'zero/api/media.js';
//import Strings from 'zero/helpers/strings.js';
//import Localization from 'zero/helpers/localization.js';
//class LinkProvider
//{
// key;
// label;
// icon;
// autoclose = true;
// action = () =>
// {
// console.warn(`[zero] A list action needs a "action" callback`);
// };
// constructor(alias: string, name: string, type: string)
// {
// this.key = key;
// this.label = label;
// this.icon = icon;
// this.action = action;
// }
// /**
// * Calls the action
// * @returns {ListColumn}
// */
// call(options)
// {
// console.info(options);
// this.action(options);
// }
//}
//export default ListAction;
zero.Web.UI/App/core/plugin.zero.js
+13 -1
View File
@@ -3,6 +3,8 @@ import Plugin from './plugin.ts';
import editors from '../renderers/editors/all.js';
import lists from '../renderers/lists/all.js';
import routes from './routes.js';
import LinkAreaPages from '../components/pickers/linkPicker/areas/pages.vue';
import LinkAreaMedia from '../components/pickers/linkPicker/areas/media.vue';
const plugin = new Plugin('zero');
@@ -17,7 +19,17 @@ plugin.addRoutes(routes);
plugin.install = (vue, zero) =>
{
zero.config.linkPicker.areas.push({
alias: 'zero.pages',
name: '@zero.config.linkareas.pages',
component: LinkAreaPages
});
zero.config.linkPicker.areas.push({
alias: 'zero.media',
name: '@zero.config.linkareas.media',
component: LinkAreaMedia
});
};
export default plugin;
zero.Web.UI/app/core/plugin.ts
-10
View File
@@ -7,7 +7,6 @@ class Plugin
routes = [];
editors = [];
lists = [];
linkAreas = [];
constructor(name)
@@ -88,15 +87,6 @@ class Plugin
{
routes.forEach(route => this.addRoute(route));
}
/*
* Add a new link area
*/
addLinkArea(area)
{
this.linkAreas.push(area);
}
};
export default Plugin;
zero.Web.UI/app/core/zero.ts
-5
View File
@@ -2,14 +2,9 @@
// ref:
// https://github.com/vuejs/vue-router/blob/dev/src/index.js
import Axios from 'axios';
import ZeroPlugin from './plugin.zero.js';
import EventHub from '../services/eventhub.js';
import VueRouter from 'vue-router';
import Vue from 'vue';
import plugins from './plugins.js';
//import CommercePlugin from '../../../zero.Commerce/Plugins/zero.Commerce/plugin.js'; // TODO dynPath
//import TestPlugin from '../../../../Laola/Laola.Backoffice/Plugin/plugin.js'; // TODO dynPath
import zeroConfig from '../config/zero.config.js';
import routerConfig from '../config/router.config.js'