203 lines
6.0 KiB
Vue
203 lines
6.0 KiB
Vue
<template>
|
|
<div>
|
|
<template v-if="readOnly">
|
|
<div>
|
|
<v-btn depressed tile @click="switchView()">
|
|
Wiki<v-icon right>{{ switchViewIcon() }}</v-icon></v-btn
|
|
>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<span class="v-label v-label--active theme--light">
|
|
Wiki
|
|
</span>
|
|
<div class="mt-2">
|
|
<v-btn-toggle v-model="currentView">
|
|
<v-btn color="white" value="0">
|
|
<v-icon>fa-eye-slash</v-icon>
|
|
</v-btn>
|
|
|
|
<v-btn color="white" value="2">
|
|
<v-icon>fa-eye</v-icon>
|
|
</v-btn>
|
|
|
|
<v-btn color="white" value="3">
|
|
<v-icon>fa-edit</v-icon>
|
|
</v-btn>
|
|
|
|
<v-btn color="white" value="1">
|
|
<v-icon>fa-columns</v-icon>
|
|
</v-btn>
|
|
</v-btn-toggle>
|
|
</div>
|
|
</template>
|
|
|
|
<v-sheet
|
|
v-if="currentView != 0"
|
|
elevation="2"
|
|
class="aywiki pa-2 pa-sm-6 mt-2"
|
|
>
|
|
<v-row>
|
|
<!-- DESIGNER -->
|
|
<!-- v-show="showDesigner()" -->
|
|
<v-col v-if="showDesigner()" :cols="currentView == 1 ? 6 : 12">
|
|
<div>
|
|
<v-btn depressed tile> <v-icon>fa-bold</v-icon></v-btn>
|
|
<v-btn depressed tile> <v-icon>fa-italic</v-icon></v-btn>
|
|
<v-btn depressed tile> <v-icon>fa-strikethrough</v-icon></v-btn>
|
|
<v-btn depressed tile> <v-icon>fa-heading</v-icon></v-btn>
|
|
<v-btn depressed tile class="ml-1">
|
|
<v-icon>fa-minus</v-icon></v-btn
|
|
>
|
|
<v-btn depressed tile> <v-icon>fa-quote-left</v-icon></v-btn>
|
|
<v-btn depressed tile> <v-icon>fa-list-ul</v-icon></v-btn>
|
|
<v-btn depressed tile> <v-icon>fa-list-ol</v-icon></v-btn>
|
|
<v-btn depressed tile> <v-icon>fa-check-square</v-icon></v-btn>
|
|
<v-btn depressed tile class="ml-1">
|
|
<v-icon>fa-table</v-icon></v-btn
|
|
>
|
|
<v-btn depressed tile> <v-icon>fa-link</v-icon></v-btn>
|
|
<v-btn depressed tile> <v-icon>fa-image</v-icon></v-btn>
|
|
<v-btn depressed tile class="ml-1"> <v-icon>fa-code</v-icon></v-btn>
|
|
<v-btn depressed tile> <v-icon>fa-square-full</v-icon></v-btn>
|
|
</div>
|
|
<v-textarea
|
|
@input="handleInput"
|
|
v-model="localVal"
|
|
auto-grow
|
|
></v-textarea>
|
|
</v-col>
|
|
<!-- WIKI -->
|
|
<v-col v-if="showWiki()" :cols="currentView == 1 ? 6 : 12">
|
|
<div class="aywiki" v-html="compiledOutput()"></div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-sheet>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import marked from "marked";
|
|
import DOMPurify from "dompurify";
|
|
const HIDDEN_VIEW = 0;
|
|
const SPLIT_VIEW = 1;
|
|
const WIKI_VIEW = 2;
|
|
const DESIGN_VIEW = 3;
|
|
|
|
export default {
|
|
created() {},
|
|
data() {
|
|
return {
|
|
localVal: this.value,
|
|
currentView: 0
|
|
};
|
|
},
|
|
props: {
|
|
value: String,
|
|
readOnly: Boolean
|
|
},
|
|
watch: {
|
|
value(value) {
|
|
this.localVal = value;
|
|
}
|
|
},
|
|
methods: {
|
|
handleInput(val) {
|
|
this.$emit("input", val);
|
|
this.localVal = val;
|
|
},
|
|
switchViewIcon() {
|
|
//return the icon that indicates what it will change to if you click it
|
|
//mirror of switchview below
|
|
|
|
if (this.readOnly) {
|
|
if (this.currentView == HIDDEN_VIEW) {
|
|
return "fa-eye";
|
|
} else {
|
|
return "fa-eye-slash";
|
|
}
|
|
return;
|
|
}
|
|
|
|
switch (this.currentView) {
|
|
case HIDDEN_VIEW:
|
|
return "fa-eye";
|
|
case WIKI_VIEW:
|
|
return "fa-columns";
|
|
case SPLIT_VIEW:
|
|
return "fa-feather";
|
|
case DESIGN_VIEW:
|
|
return "fa-eye";
|
|
}
|
|
},
|
|
showWiki() {
|
|
return this.currentView == WIKI_VIEW || this.currentView == SPLIT_VIEW;
|
|
},
|
|
showDesigner() {
|
|
return this.currentView == DESIGN_VIEW || this.currentView == SPLIT_VIEW;
|
|
},
|
|
switchView() {
|
|
//if user can't edit then cycle between hidden and wiki view
|
|
if (this.readOnly) {
|
|
if (this.currentView == HIDDEN_VIEW) {
|
|
this.currentView = WIKI_VIEW;
|
|
} else {
|
|
this.currentView = HIDDEN_VIEW;
|
|
}
|
|
return;
|
|
}
|
|
//user can edit so switch OUT of hidden view but never into it
|
|
//and cycle between design, split and wiki views only
|
|
//never goes into hidden
|
|
switch (this.currentView) {
|
|
case HIDDEN_VIEW:
|
|
this.currentView = WIKI_VIEW;
|
|
break;
|
|
case WIKI_VIEW:
|
|
this.currentView = SPLIT_VIEW;
|
|
break;
|
|
case SPLIT_VIEW:
|
|
this.currentView = DESIGN_VIEW;
|
|
break;
|
|
case DESIGN_VIEW:
|
|
this.currentView = WIKI_VIEW;
|
|
break;
|
|
}
|
|
},
|
|
visibleIcon() {
|
|
return this.wikiVisible ? "fa-eye-slash" : "fa-eye";
|
|
},
|
|
compiledOutput() {
|
|
return DOMPurify.sanitize(marked(this.localVal));
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
todo:
|
|
|
|
todo: Add wikiContent field to form defintions at server so can hide or show in customization
|
|
- Also for dataLists? (for reporting not grid I mean)
|
|
|
|
if can't edit and no content then don't show at all
|
|
- does it need to have a column wrapper then and remove it from the parent form?
|
|
|
|
Mobile view put editor and result in v-tab control so can swish back and forth while editing
|
|
Standard view maybe top and bottom better?
|
|
|
|
baseurl setting for local images:
|
|
https://marked.js.org/#/USING_ADVANCED.md#options
|
|
|
|
todo: event log type just for edit wiki?
|
|
- this is because a wiki is not a discrete object in v8 so rights follow object itself and maybe it's necessary to know when wiki was edited?
|
|
|
|
Clean up the example markdown, go through and use mine and sprinkle in the marked sample stuff where it differs
|
|
- Make sure images ONLY come from our own server, not any other
|
|
- Maybe make a key image and put on our server for wiki example so we can if we feel like it track usage of demo data
|
|
|
|
Style the task markdown output, it looks pretty bleak right now
|
|
I stole the css from toast it's in the notes, search for task-list-item
|
|
also maybe there's a cleaner way try a google search once you see how they did it
|
|
|
|
*/
|
|
</script>
|