druware-components 0.1.1

package/animated-count/animated-count.vue

@@ -0,0 +1,102 @@
+<template>
+  <div :class="cardClass">
+    <div v-if="icon != null" class="icon-badge">
+      <span :class="'icon is-large ' + iconStyle">
+        <i :class="iconFamily + ' ' + icon" aria-hidden="true"></i>
+      </span>
+    </div>
+    <div class="count">{{ currentCount }}</div>
+    <div class="label">{{ label }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: function() {
+    return {
+      currentCount: 0,
+    }
+  },
+  props: {
+    icon: {
+      type: String,
+      default: null,
+    },
+    iconFamily: {
+      type: String,
+      default: "fa",
+    },
+
+    count: {
+      type: Number,
+      default: 0,
+    },
+    label: {
+      type: String,
+      default: null,
+    },
+    iconStyle: {
+      type: String,
+      default: "has-text-info",
+    },
+    card: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed: {
+    cardClass() {
+      return (this.card ? 'card ' : '') + "animated-count";
+    }
+  },
+  methods: {
+    async setCount(value) {
+      var increment = Math.round(value / 10);
+      while (this.currentCount < value) {
+        this.currentCount += increment;
+        await new Promise(resolve => setTimeout(resolve, 25));
+      }
+      this.currentCount = value;
+    }
+  },
+  watch: {
+    count(to,from) {
+      if (to === from) return;
+      this.setCount(to);
+      return;
+    }
+  },
+  mounted() {
+    this.setCount(this.count);
+  }
+};
+</script>
+<style lang="scss" scoped>
+.animated-count {
+  // border: 1px solid black;
+  text-align: center;
+  align-content: space-evenly;
+  vertical-align: middle;
+  max-width: 140px;
+  min-width: 140px;
+  min-height: 128px;
+  max-height:128px;
+
+  .icon-badge {
+    font-size: 2em;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+  }
+
+  .count {
+    font-size: 1.25em;
+    font-weight: 800;
+  }
+
+  .label {
+    color: #999999;
+    font-size: 0.75em;
+    font-weight: 100;
+  }
+}
+</style>

package/animated-count/index.js

@@ -0,0 +1,5 @@
+import AnimatedCount from "./animated-count.vue"
+
+export { AnimatedCount }
+export default AnimatedCount
+

package/api/base.js

@@ -0,0 +1,133 @@
+import axios from "axios";
+
+const trusteeStats = {
+    activeCaseCount: 0,
+    opendLast30: 0,
+    closedLast30: 0,
+    docketNext30: 0,
+};
+
+export default {
+    name: "api",
+    models: {
+        trustee: {
+            stats: trusteeStats,
+        },
+    },
+    url: {
+        profile: "316F7A82-BC60-46A4-B584-019CD3608B87",
+        base: {
+            tag: "/api/tag/",
+            trustee: "/api/trustee/",
+            calendar: "/api/calendar/",
+            case: "/api/case/",
+            creditor: "/api/creditor/",
+            employer: "/api/employer/"
+        },
+        authentication: {
+            login: "/api/login/",
+            user: "/api/user/",
+            status: "/api/profile/",
+            register: "/api/register/",
+
+        },
+    },
+    list: function (url, obj, onComplete, onError, page = 0, count = 100) {
+        axios
+            .get(url + "?page=" + page + "&count=" + count)
+            .then((response) => {
+                if (response.status == 200) {
+                    onComplete(obj, response.data);
+                    return;
+                }
+                onError(obj, response.message);
+            })
+            .catch((error) => onError(obj, error));
+    },
+
+    getUrl: function(url, obj, onComplete, onError) {
+        axios
+            .get(url)
+            .then(response => {
+                if (response.status == 200) {
+                    onComplete(obj, response.data);
+                    return;
+                }
+                onError(obj, response.statusText);
+            })
+            .catch(error => onError(obj, error));
+    },
+
+    get: function(url, obj, id, onComplete, onError) {
+        axios
+            .get(url + id)
+            .then(response => {
+                if (response.status == 200) {
+                    onComplete(obj, response.data);
+                    return;
+                }
+                onError(obj, response.statusText);
+            })
+            .catch(error => onError(obj, error));
+    },
+
+    post: function(url, obj, model, onComplete, onError) {
+        axios
+            .post(url, model)
+            .then(response => {
+                if (response.status == 200) {
+                    onComplete(obj, response.data);
+                    return;
+                }
+                if (response.status == 400) {
+                    onError(obj, response.response);
+                    return;
+                }
+                onError(obj, response.statusText);
+            })
+            .catch(error => onError(obj, error));
+    },
+
+    put: function(url, obj, id, model, onComplete, onError) {
+        axios
+            .put(url + id, model)
+            .then(response => {
+                if (response.status == 200) {
+                    onComplete(obj, response.data);
+                    return;
+                }
+                if (response.status == 400) {
+                    onError(obj, response);
+                    return;
+                }
+                onError(obj, response.statusText);
+            })
+            .catch(error => onError(obj, error));
+    },
+
+    delete: function(url, obj, id, onComplete, onError) {
+        axios
+            .delete(url + id)
+            .then(response => {
+                if (response.status == 200) {
+                    onComplete(obj, response.data);
+                    return;
+                }
+                onError(obj, response.statusText);
+            })
+            .catch(error => onError(obj, error));
+    },
+
+    model: function(url, obj, onComplete, onError) {
+        axios
+            .get(url + "model")
+            .then(response => {
+                if (response.status == 200) {
+                    onComplete(obj, response.data);
+                    return;
+                }
+                onError(obj, response.statusText);
+            })
+            .catch(error => onError(obj, error));
+    }
+};

package/api/index.js

@@ -0,0 +1,5 @@
+import api  from "./base.js"
+
+export { api }
+
+export default api

package/article-view/article-view.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="new-article-view">
+    <article class="media mt-1 mb-3" v-if="article != null">
+      <figure class="media-left" v-if="showIcon">
+        <p class="image is-64x64">
+          <router-link :to="route">
+            <img v-if="article.iconImage != null" :src="article.iconImage" />
+            <img v-else-if="article.iconId != null" :src="'/api/asset/' + article.iconId" />
+            <img v-else src="https://bulma.io/assets/images/placeholders/128x128.png" /></router-link>
+        </p>
+      </figure>
+      <div class="media-content">
+        <div class="content">
+          <router-link :to="route">
+            <h3 :class="'title mb-2 ' + (small ? 'is-5' : 'is-4')">{{article.title}}</h3>
+          </router-link>
+          <span v-html="compileMarkdown((summary) ? article.summary : article.body)"></span>
+          <div class="level is-mobile mt-2">
+            <div class="level-left">
+              <strong  v-if="!disableByLine">{{article.byLine}} @ <small v-if="!disableDates">{{formatDate(article.posted)}}</small></strong>
+            </div>
+            <div class="level-right">
+              <span v-if="!disableTags">
+                <span v-for="tag in article.tags" :key="article.tags.indexOf(tag)">
+                  <span class="tag m-1">{{tag}}</span>
+                </span>
+              </span>
+              <a :href="url" v-if="summary && url !== ''" class="level-item">
+                <span class="icon is-medium"><i class="fa fa-search"></i></span>
+              </a>
+              <router-link :to="route" v-else-if="summary && route !== ''" class="level-item">
+                <span class="icon is-medium"><i class="fa fa-search"></i></span>
+              </router-link>
+            </div>
+          </div>
+        </div>
+        <!-- nav v-if="enableComments || enableLikes" class="level is-mobile">
+          <div class="level-left">
+            <a v-if="enableLikes" class="level-item">
+              <span class="icon is-small"><i class="fa fa-heart"></i></span>
+            </a>
+            <a v-if="enableComments" class="level-item">
+              <span class="icon is-small"><i class="fa fa-comment"></i></span>
+            </a>
+          </div>
+        </nav -->
+        <div v-if="enableDisqus" id="disqus_thread"></div>
+      </div>
+    </article>
+  </div>
+</template>
+
+<script>
+import { RouterLink } from 'vue-router'
+
+import {marked} from "marked";
+
+export default {
+  name: "NewsArticleView",
+  props: {
+    article: {
+      type: Object,
+      default: null,
+    },
+    summary: {
+      type: Boolean,
+      default: false,
+    },
+    route: {
+      type: String,
+      default: "",
+    },
+    enableComments: {
+      type: Boolean,
+      default: false,
+    },
+    enableDisqus: {
+      type: Boolean,
+      default: false,
+    },
+    enableLikes: {
+      type: Boolean,
+      default: false,
+    },
+    disableTags: {
+      type: Boolean,
+      default: false,
+    },
+    disableByLine: {
+      type: Boolean,
+      default: false,
+    },
+    disableDates: {
+      type: Boolean,
+      default: false,
+    },
+    showIcon: {
+      type: Boolean,
+      default: false,
+    },
+    url: {
+      type: String,
+      default: "",
+    },
+    disqusShortname: {
+      type: String,
+      default: null,
+    }
+  },
+  components: {
+     RouterLink
+  },
+  methods: {
+    showDisqusThread() {
+      let d = document, s = d.createElement('script');
+      s.src = 'https://' + this.disqusShortname + '.disqus.com/embed.js';
+      s.setAttribute('data-timestamp', +new Date());
+      (d.head || d.body).appendChild(s);
+    },
+    formatDate(str) {
+      let d = new Date(str);
+      return (
+          d.toLocaleDateString("en-US") + "  " + d.toLocaleTimeString("en-US")
+      );
+    },
+    compileMarkdown(str) {
+      return marked(str);
+    },
+  },
+    mounted() {
+      let disqus_config = function () {
+        this.page.url = document.location.href;
+        this.page.identifier = this.article.permalink ?? document.location.href;
+      }
+      if (this.enableDisqus && this.disqusShortname !== null) {
+        this.showDisqusThread();
+      }
+    }
+}
+</script>
+
+<style scoped>
+.new-article-view {
+  overflow: hidden;
+}
+</style>

package/article-view/index.js

@@ -0,0 +1,4 @@
+import ArticleView from "./article-view.vue";
+
+export { ArticleView }
+export default ArticleView

package/content/content.js

@@ -0,0 +1,10 @@
+
+export default {
+    name: "content",
+    assets: "/api/assets/",
+    assetTypes: "/api/assettype/",
+    documents: "/api/document/",
+    news: "/api/news/",
+    products: "/api/product/",
+    tags: "/api/tag/",
+};

package/content/index.js

@@ -0,0 +1,4 @@
+import content  from "./content.js"
+
+export { content }
+export default content

package/dist/druware-components.css

@@ -0,0 +1,26 @@
+.animated-count[data-v-0827a913] {
+  text-align: center;
+  align-content: space-evenly;
+  vertical-align: middle;
+  max-width: 140px;
+  min-width: 140px;
+  min-height: 128px;
+  max-height: 128px;
+}
+.animated-count .icon-badge[data-v-0827a913] {
+  font-size: 2em;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
+}
+.animated-count .count[data-v-0827a913] {
+  font-size: 1.25em;
+  font-weight: 800;
+}
+.animated-count .label[data-v-0827a913] {
+  color: #999999;
+  font-size: 0.75em;
+  font-weight: 100;
+}
+.new-article-view[data-v-b6905e0a] {
+  overflow: hidden;
+}