kanbancast-components - npm Package Compare versions

Comparing version 1.0.20 to 1.1.0

dist/board-view.d.ts

@@ -28,2 +28,5 @@ import { LitElement } from 'lit';
     theme: string;
+    votes: {
+        [taskId: number]: number;
+    };
     static styles: import('lit').CSSResult;
@@ -34,2 +37,3 @@ toggleTheme(): void;
     fetchStatuses(): Promise<void>;
+    initializeVotes(): void;
     get tasksForSelectedTab(): {
@@ -47,2 +51,7 @@ status: Status;
     submitNewTask(): Promise<void>;
+    getStatusStyles(statusTitle: string): {
+        emoji: string;
+        bgColor: string;
+        textColor: string;
+    };
     render(): import('lit-html').TemplateResult<1>;
@@ -49,0 +58,0 @@ updated(changedProperties: {

dist/board-view.es.js

@@ -1,2 +0,2 @@
-import { css as P, LitElement as T, html as m } from "lit";
+import { css as C, LitElement as P, html as y } from "lit";
 /**
@@ -7,6 +7,6 @@ * @license
  */
-const C = (i) => (t, e) => {
+const T = (s) => (t, e) => {
   e !== void 0 ? e.addInitializer(() => {
-    customElements.define(i, t);
-  }) : customElements.define(i, t);
+    customElements.define(s, t);
+  }) : customElements.define(s, t);
 };
@@ -18,6 +18,6 @@ /**
  */
-const f = globalThis, v = f.ShadowRoot && (f.ShadyCSS === void 0 || f.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, _ = Symbol(), S = /* @__PURE__ */ new WeakMap();
+const f = globalThis, w = f.ShadowRoot && (f.ShadyCSS === void 0 || f.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, _ = Symbol(), x = /* @__PURE__ */ new WeakMap();
 let U = class {
-  constructor(t, e, s) {
-    if (this._$cssResult$ = !0, s !== _)
+  constructor(t, e, o) {
+    if (this._$cssResult$ = !0, o !== _)
       throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
@@ -29,5 +29,5 @@ this.cssText = t, this.t = e;
     const e = this.t;
-    if (v && t === void 0) {
-      const s = e !== void 0 && e.length === 1;
-      s && (t = S.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), s && S.set(e, t));
+    if (w && t === void 0) {
+      const o = e !== void 0 && e.length === 1;
+      o && (t = x.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), o && x.set(e, t));
     }
@@ -40,16 +40,16 @@ return t;
 };
-const O = (i) => new U(typeof i == "string" ? i : i + "", void 0, _), A = (i, t) => {
-  if (v)
-    i.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+const A = (s) => new U(typeof s == "string" ? s : s + "", void 0, _), O = (s, t) => {
+  if (w)
+    s.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
   else
     for (const e of t) {
-      const s = document.createElement("style"), o = f.litNonce;
-      o !== void 0 && s.setAttribute("nonce", o), s.textContent = e.cssText, i.appendChild(s);
+      const o = document.createElement("style"), i = f.litNonce;
+      i !== void 0 && o.setAttribute("nonce", i), o.textContent = e.cssText, s.appendChild(o);
     }
-}, k = v ? (i) => i : (i) => i instanceof CSSStyleSheet ? ((t) => {
+}, k = w ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((t) => {
   let e = "";
-  for (const s of t.cssRules)
-    e += s.cssText;
-  return O(e);
-})(i) : i;
+  for (const o of t.cssRules)
+    e += o.cssText;
+  return A(e);
+})(s) : s;
 /**
@@ -60,20 +60,20 @@ * @license
  */
-const { is: j, defineProperty: D, getOwnPropertyDescriptor: M, getOwnPropertyNames: z, getOwnPropertySymbols: R, getPrototypeOf: I } = Object, h = globalThis, x = h.trustedTypes, L = x ? x.emptyScript : "", y = h.reactiveElementPolyfillSupport, u = (i, t) => i, g = { toAttribute(i, t) {
+const { is: j, defineProperty: D, getOwnPropertyDescriptor: M, getOwnPropertyNames: R, getOwnPropertySymbols: z, getPrototypeOf: I } = Object, h = globalThis, S = h.trustedTypes, L = S ? S.emptyScript : "", v = h.reactiveElementPolyfillSupport, u = (s, t) => s, g = { toAttribute(s, t) {
   switch (t) {
     case Boolean:
-      i = i ? L : null;
+      s = s ? L : null;
       break;
     case Object:
     case Array:
-      i = i == null ? i : JSON.stringify(i);
+      s = s == null ? s : JSON.stringify(s);
   }
-  return i;
-}, fromAttribute(i, t) {
-  let e = i;
+  return s;
+}, fromAttribute(s, t) {
+  let e = s;
   switch (t) {
     case Boolean:
-      e = i !== null;
+      e = s !== null;
       break;
     case Number:
-      e = i === null ? null : Number(i);
+      e = s === null ? null : Number(s);
       break;
@@ -83,3 +83,3 @@ case Object:
       try {
-        e = JSON.parse(i);
+        e = JSON.parse(s);
       } catch {
@@ -90,3 +90,3 @@ e = null;
   return e;
-} }, w = (i, t) => !j(i, t), E = { attribute: !0, type: String, converter: g, reflect: !1, hasChanged: w };
+} }, $ = (s, t) => !j(s, t), E = { attribute: !0, type: String, converter: g, reflect: !1, hasChanged: $ };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), h.litPropertyMetadata ?? (h.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
@@ -102,17 +102,17 @@ class p extends HTMLElement {
     if (e.state && (e.attribute = !1), this._$Ei(), this.elementProperties.set(t, e), !e.noAccessor) {
-      const s = Symbol(), o = this.getPropertyDescriptor(t, s, e);
-      o !== void 0 && D(this.prototype, t, o);
+      const o = Symbol(), i = this.getPropertyDescriptor(t, o, e);
+      i !== void 0 && D(this.prototype, t, i);
     }
   }
-  static getPropertyDescriptor(t, e, s) {
-    const { get: o, set: n } = M(this.prototype, t) ?? { get() {
+  static getPropertyDescriptor(t, e, o) {
+    const { get: i, set: r } = M(this.prototype, t) ?? { get() {
       return this[e];
-    }, set(r) {
-      this[e] = r;
+    }, set(n) {
+      this[e] = n;
     } };
     return { get() {
-      return o == null ? void 0 : o.call(this);
-    }, set(r) {
-      const c = o == null ? void 0 : o.call(this);
-      n.call(this, r), this.requestUpdate(t, c, s);
+      return i == null ? void 0 : i.call(this);
+    }, set(n) {
+      const c = i == null ? void 0 : i.call(this);
+      r.call(this, n), this.requestUpdate(t, c, o);
     }, configurable: !0, enumerable: !0 };
@@ -133,5 +133,5 @@ }
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(u("properties"))) {
-      const e = this.properties, s = [...z(e), ...R(e)];
-      for (const o of s)
-        this.createProperty(o, e[o]);
+      const e = this.properties, o = [...R(e), ...z(e)];
+      for (const i of o)
+        this.createProperty(i, e[i]);
     }
@@ -142,9 +142,9 @@ const t = this[Symbol.metadata];
       if (e !== void 0)
-        for (const [s, o] of e)
-          this.elementProperties.set(s, o);
+        for (const [o, i] of e)
+          this.elementProperties.set(o, i);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [e, s] of this.elementProperties) {
-      const o = this._$Eu(e, s);
-      o !== void 0 && this._$Eh.set(o, e);
+    for (const [e, o] of this.elementProperties) {
+      const i = this._$Eu(e, o);
+      i !== void 0 && this._$Eh.set(i, e);
     }
@@ -156,5 +156,5 @@ this.elementStyles = this.finalizeStyles(this.styles);
     if (Array.isArray(t)) {
-      const s = new Set(t.flat(1 / 0).reverse());
-      for (const o of s)
-        e.unshift(k(o));
+      const o = new Set(t.flat(1 / 0).reverse());
+      for (const i of o)
+        e.unshift(k(i));
     } else
@@ -165,4 +165,4 @@ t !== void 0 && e.push(k(t));
   static _$Eu(t, e) {
-    const s = e.attribute;
-    return s === !1 ? void 0 : typeof s == "string" ? s : typeof t == "string" ? t.toLowerCase() : void 0;
+    const o = e.attribute;
+    return o === !1 ? void 0 : typeof o == "string" ? o : typeof t == "string" ? t.toLowerCase() : void 0;
   }
@@ -186,4 +186,4 @@ constructor() {
     const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
-    for (const s of e.keys())
-      this.hasOwnProperty(s) && (t.set(s, this[s]), delete this[s]);
+    for (const o of e.keys())
+      this.hasOwnProperty(o) && (t.set(o, this[o]), delete this[o]);
     t.size > 0 && (this._$Ep = t);
@@ -193,3 +193,3 @@ }
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return A(t, this.constructor.elementStyles), t;
+    return O(t, this.constructor.elementStyles), t;
   }
@@ -199,4 +199,4 @@ connectedCallback() {
     this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((e) => {
-      var s;
-      return (s = e.hostConnected) == null ? void 0 : s.call(e);
+      var o;
+      return (o = e.hostConnected) == null ? void 0 : o.call(e);
     });
@@ -209,35 +209,35 @@ }
     (t = this._$EO) == null || t.forEach((e) => {
-      var s;
-      return (s = e.hostDisconnected) == null ? void 0 : s.call(e);
+      var o;
+      return (o = e.hostDisconnected) == null ? void 0 : o.call(e);
     });
   }
-  attributeChangedCallback(t, e, s) {
-    this._$AK(t, s);
+  attributeChangedCallback(t, e, o) {
+    this._$AK(t, o);
   }
   _$EC(t, e) {
-    var n;
-    const s = this.constructor.elementProperties.get(t), o = this.constructor._$Eu(t, s);
-    if (o !== void 0 && s.reflect === !0) {
-      const r = (((n = s.converter) == null ? void 0 : n.toAttribute) !== void 0 ? s.converter : g).toAttribute(e, s.type);
-      this._$Em = t, r == null ? this.removeAttribute(o) : this.setAttribute(o, r), this._$Em = null;
+    var r;
+    const o = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, o);
+    if (i !== void 0 && o.reflect === !0) {
+      const n = (((r = o.converter) == null ? void 0 : r.toAttribute) !== void 0 ? o.converter : g).toAttribute(e, o.type);
+      this._$Em = t, n == null ? this.removeAttribute(i) : this.setAttribute(i, n), this._$Em = null;
     }
   }
   _$AK(t, e) {
-    var n;
-    const s = this.constructor, o = s._$Eh.get(t);
-    if (o !== void 0 && this._$Em !== o) {
-      const r = s.getPropertyOptions(o), c = typeof r.converter == "function" ? { fromAttribute: r.converter } : ((n = r.converter) == null ? void 0 : n.fromAttribute) !== void 0 ? r.converter : g;
-      this._$Em = o, this[o] = c.fromAttribute(e, r.type), this._$Em = null;
+    var r;
+    const o = this.constructor, i = o._$Eh.get(t);
+    if (i !== void 0 && this._$Em !== i) {
+      const n = o.getPropertyOptions(i), c = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((r = n.converter) == null ? void 0 : r.fromAttribute) !== void 0 ? n.converter : g;
+      this._$Em = i, this[i] = c.fromAttribute(e, n.type), this._$Em = null;
     }
   }
-  requestUpdate(t, e, s) {
+  requestUpdate(t, e, o) {
     if (t !== void 0) {
-      if (s ?? (s = this.constructor.getPropertyOptions(t)), !(s.hasChanged ?? w)(this[t], e))
+      if (o ?? (o = this.constructor.getPropertyOptions(t)), !(o.hasChanged ?? $)(this[t], e))
         return;
-      this.P(t, e, s);
+      this.P(t, e, o);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$ET());
   }
-  P(t, e, s) {
-    this._$AL.has(t) || this._$AL.set(t, e), s.reflect === !0 && this._$Em !== t && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(t);
+  P(t, e, o) {
+    this._$AL.has(t) || this._$AL.set(t, e), o.reflect === !0 && this._$Em !== t && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(t);
   }
@@ -258,3 +258,3 @@ async _$ET() {
   performUpdate() {
-    var s;
+    var o;
     if (!this.isUpdatePending)
@@ -264,10 +264,10 @@ return;
       if (this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this._$Ep) {
-        for (const [n, r] of this._$Ep)
-          this[n] = r;
+        for (const [r, n] of this._$Ep)
+          this[r] = n;
         this._$Ep = void 0;
       }
-      const o = this.constructor.elementProperties;
-      if (o.size > 0)
-        for (const [n, r] of o)
-          r.wrapped !== !0 || this._$AL.has(n) || this[n] === void 0 || this.P(n, this[n], r);
+      const i = this.constructor.elementProperties;
+      if (i.size > 0)
+        for (const [r, n] of i)
+          n.wrapped !== !0 || this._$AL.has(r) || this[r] === void 0 || this.P(r, this[r], n);
     }
@@ -277,8 +277,8 @@ let t = !1;
     try {
-      t = this.shouldUpdate(e), t ? (this.willUpdate(e), (s = this._$EO) == null || s.forEach((o) => {
-        var n;
-        return (n = o.hostUpdate) == null ? void 0 : n.call(o);
+      t = this.shouldUpdate(e), t ? (this.willUpdate(e), (o = this._$EO) == null || o.forEach((i) => {
+        var r;
+        return (r = i.hostUpdate) == null ? void 0 : r.call(i);
       }), this.update(e)) : this._$EU();
-    } catch (o) {
-      throw t = !1, this._$EU(), o;
+    } catch (i) {
+      throw t = !1, this._$EU(), i;
     }
@@ -291,5 +291,5 @@ t && this._$AE(e);
     var e;
-    (e = this._$EO) == null || e.forEach((s) => {
-      var o;
-      return (o = s.hostUpdated) == null ? void 0 : o.call(s);
+    (e = this._$EO) == null || e.forEach((o) => {
+      var i;
+      return (i = o.hostUpdated) == null ? void 0 : i.call(o);
     }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
@@ -317,3 +317,3 @@ }
 }
-p.elementStyles = [], p.shadowRootOptions = { mode: "open" }, p[u("elementProperties")] = /* @__PURE__ */ new Map(), p[u("finalized")] = /* @__PURE__ */ new Map(), y == null || y({ ReactiveElement: p }), (h.reactiveElementVersions ?? (h.reactiveElementVersions = [])).push("2.0.4");
+p.elementStyles = [], p.shadowRootOptions = { mode: "open" }, p[u("elementProperties")] = /* @__PURE__ */ new Map(), p[u("finalized")] = /* @__PURE__ */ new Map(), v == null || v({ ReactiveElement: p }), (h.reactiveElementVersions ?? (h.reactiveElementVersions = [])).push("2.0.4");
 /**
@@ -324,28 +324,28 @@ * @license
  */
-const N = { attribute: !0, type: String, converter: g, reflect: !1, hasChanged: w }, F = (i = N, t, e) => {
-  const { kind: s, metadata: o } = e;
-  let n = globalThis.litPropertyMetadata.get(o);
-  if (n === void 0 && globalThis.litPropertyMetadata.set(o, n = /* @__PURE__ */ new Map()), n.set(e.name, i), s === "accessor") {
-    const { name: r } = e;
+const F = { attribute: !0, type: String, converter: g, reflect: !1, hasChanged: $ }, N = (s = F, t, e) => {
+  const { kind: o, metadata: i } = e;
+  let r = globalThis.litPropertyMetadata.get(i);
+  if (r === void 0 && globalThis.litPropertyMetadata.set(i, r = /* @__PURE__ */ new Map()), r.set(e.name, s), o === "accessor") {
+    const { name: n } = e;
     return { set(c) {
-      const b = t.get.call(this);
-      t.set.call(this, c), this.requestUpdate(r, b, i);
+      const m = t.get.call(this);
+      t.set.call(this, c), this.requestUpdate(n, m, s);
     }, init(c) {
-      return c !== void 0 && this.P(r, void 0, i), c;
+      return c !== void 0 && this.P(n, void 0, s), c;
     } };
   }
-  if (s === "setter") {
-    const { name: r } = e;
+  if (o === "setter") {
+    const { name: n } = e;
     return function(c) {
-      const b = this[r];
-      t.call(this, c), this.requestUpdate(r, b, i);
+      const m = this[n];
+      t.call(this, c), this.requestUpdate(n, m, s);
     };
   }
-  throw Error("Unsupported decorator location: " + s);
+  throw Error("Unsupported decorator location: " + o);
 };
-function d(i) {
-  return (t, e) => typeof e == "object" ? F(i, t, e) : ((s, o, n) => {
-    const r = o.hasOwnProperty(n);
-    return o.constructor.createProperty(n, r ? { ...s, wrapped: !0 } : s), r ? Object.getOwnPropertyDescriptor(o, n) : void 0;
-  })(i, t, e);
+function d(s) {
+  return (t, e) => typeof e == "object" ? N(s, t, e) : ((o, i, r) => {
+    const n = i.hasOwnProperty(r);
+    return i.constructor.createProperty(r, n ? { ...o, wrapped: !0 } : o), n ? Object.getOwnPropertyDescriptor(i, r) : void 0;
+  })(s, t, e);
 }
@@ -357,4 +357,4 @@ /**
  */
-function $(i) {
-  return d({ ...i, state: !0, attribute: !1 });
+function b(s) {
+  return d({ ...s, state: !0, attribute: !1 });
 }
@@ -366,15 +366,15 @@ /**
  */
-function q(i, t, e) {
-  return i ? t(i) : e == null ? void 0 : e(i);
+function q(s, t, e) {
+  return s ? t(s) : e == null ? void 0 : e(s);
 }
-var K = Object.defineProperty, B = Object.getOwnPropertyDescriptor, l = (i, t, e, s) => {
-  for (var o = s > 1 ? void 0 : s ? B(t, e) : t, n = i.length - 1, r; n >= 0; n--)
-    (r = i[n]) && (o = (s ? r(t, e, o) : r(o)) || o);
-  return s && o && K(t, e, o), o;
+var K = Object.defineProperty, B = Object.getOwnPropertyDescriptor, l = (s, t, e, o) => {
+  for (var i = o > 1 ? void 0 : o ? B(t, e) : t, r = s.length - 1, n; r >= 0; r--)
+    (n = s[r]) && (i = (o ? n(t, e, i) : n(i)) || i);
+  return o && i && K(t, e, i), i;
 };
-let a = class extends T {
+let a = class extends P {
   constructor() {
     super(...arguments), this.statuses = [
       /* Your existing statuses */
-    ], this.projectId = 4, this.newTaskTitle = "", this.newTaskDescription = "", this.apiKey = "ilfYeZiUOU9q", this.selectedTab = "Active", this.showModal = !1, this.theme = "light";
+    ], this.projectId = 1, this.newTaskTitle = "", this.newTaskDescription = "", this.apiKey = "xMFmZ0mI9OT5", this.selectedTab = "Active", this.showModal = !1, this.theme = "light", this.votes = {};
   }
@@ -388,63 +388,75 @@ toggleTheme() {
   applyTheme() {
-    var i;
-    (i = this.shadowRoot) == null || i.host.classList.toggle("dark-theme", this.theme === "dark");
+    var s;
+    (s = this.shadowRoot) == null || s.host.classList.toggle("dark-theme", this.theme === "dark");
   }
   async fetchStatuses() {
     try {
-      const i = await fetch(
-        "https://kanbancast.com/api/projects",
-        {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-            "x-api-key": `${this.apiKey}`
-          }
+      const s = await fetch("https://kanbancast.com/api/projects", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": `${this.apiKey}`
         }
-      );
-      if (i.ok) {
-        const t = await i.json();
-        console.log(t), this.statuses = t.project.statuses, console.log("Statuses fetched successfully");
+      });
+      if (s.ok) {
+        const t = await s.json();
+        console.log(t), this.statuses = t.project.statuses, console.log("Statuses fetched successfully"), this.initializeVotes();
       } else
-        console.log(i), console.error("Failed to fetch statuses");
-    } catch (i) {
-      console.error("Error fetching statuses:", i);
+        console.log(s), console.error("Failed to fetch statuses");
+    } catch (s) {
+      console.error("Error fetching statuses:", s);
     }
   }
+  initializeVotes() {
+    this.statuses.forEach((s) => {
+      s.tasks.forEach((t) => {
+        this.votes[t.id] = t.votes ?? 1;
+      });
+    });
+  }
   get tasksForSelectedTab() {
-    const i = ["To Do", "In Progress", "Pending", "Review"], t = ["Done", "Published"], e = this.selectedTab === "Active" ? i : t;
-    return (this.statuses || []).filter((s) => e.includes(s.title)).flatMap((s) => s.tasks.map((o) => ({ ...o, status: s })));
+    const s = ["To Do", "In Progress", "Pending", "Review", "Requested"], t = ["Done", "Published"], e = this.selectedTab === "Active" ? s : t;
+    return (this.statuses || []).filter((o) => e.includes(o.title)).flatMap((o) => o.tasks.map((i) => ({ ...i, status: o })));
   }
-  handleTitleChange(i) {
-    this.newTaskTitle = i.target.value;
+  handleTitleChange(s) {
+    this.newTaskTitle = s.target.value;
   }
-  handleDescriptionChange(i) {
-    this.newTaskDescription = i.target.value;
+  handleDescriptionChange(s) {
+    this.newTaskDescription = s.target.value;
   }
   async submitNewTask() {
-    const i = {
-      title: this.newTaskTitle,
-      description: this.newTaskDescription,
-      status_id: 1
-      // Assuming new tasks go to "Pending" status
-    };
+    const s = encodeURIComponent(this.newTaskTitle), t = encodeURIComponent(this.newTaskDescription);
     try {
-      const t = await fetch(`https://kanbancast.com/api/projects/${this.projectId}/tasks`, {
-        method: "POST",
+      const e = await fetch(`https://kanbancast.com/api/tasks/create?title=${s}&description=${t}`, {
+        method: "GET",
         headers: {
           "Content-Type": "application/json",
-          Authorization: `Bearer ${this.apiKey}`
-        },
-        body: JSON.stringify(i)
+          "x-api-key": `${this.apiKey}`
+        }
       });
-      if (t.ok) {
-        const e = await t.json(), s = this.statuses.find((o) => o.slug === "pending");
-        s == null || s.tasks.push(e), this.showModal = !1;
+      if (e.ok) {
+        const o = await e.json(), i = this.statuses.find((r) => r.slug === "pending");
+        i == null || i.tasks.push(o.task), this.votes[o.task.id] = o.task.votes ?? 1, this.showModal = !1;
       } else
         console.error("Failed to submit new task");
-    } catch (t) {
-      console.error("Error submitting new task:", t);
+    } catch (e) {
+      console.error("Error submitting new task:", e);
     }
   }
+  getStatusStyles(s) {
+    switch (s) {
+      case "Requested":
+        return { emoji: "🙏", bgColor: "#f0f8ff", textColor: "#0000ff" };
+      case "Done":
+        return { emoji: "✅", bgColor: "#e0ffe0", textColor: "#008000" };
+      case "To Do":
+        return { emoji: "📝", bgColor: "#fff0e0", textColor: "#ff8c00" };
+      case "In Progress":
+        return { emoji: "🏗️", bgColor: "#f0e68c", textColor: "#ffd700" };
+      default:
+        return { emoji: "", bgColor: "#f0f0f0", textColor: "#000000" };
+    }
+  }
   render() {
-    return m`
+    return y`
             <div class="container">
@@ -465,25 +477,32 @@ <div class="header">
                         </button>
-
                     </div>
                     <button @click=${() => this.showModal = !0} class="suggest-feature-button">Suggest a Feature
                     </button>
-
                 </div>
 
-
                 <div class="tasks-list">
-                    ${this.tasksForSelectedTab.map((i) => m`
-                        <li class="task-item">
-                            <button @click=${() => this.upvoteTask(i)} class="upvote-button">
-                                <span class="votes-count">${i.votes ?? 1}</span>
-                            </button>
-                            <div class="task-details">
-                                <p class="task-title">${i.title}</p>
-                                <p class="task-description">${i.description}</p>
-                            </div>
-                        </li>
-                    `)}
+                    ${this.tasksForSelectedTab.map((s) => {
+      var i, r;
+      const { emoji: t, bgColor: e, textColor: o } = this.getStatusStyles(((i = s.status) == null ? void 0 : i.title) ?? "");
+      return y`
+                            <li class="task-item">
+                                <button @click=${() => this.upvoteTask(s)} class="upvote-button">
+                                    <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 1.3 1.3" enable-background="new 0 0 52 52" xml:space="preserve"><path d="M1.093 0.95H0.208c-0.025 0 -0.043 -0.033 -0.023 -0.055l0.433 -0.53c0.015 -0.02 0.048 -0.02 0.063 0l0.438 0.53c0.017 0.023 0.003 0.055 -0.025 0.055"/></svg>
+                                    <span class="votes-count">${this.votes[s.id] ?? 1}</span>
+                                </button>
+                                <div class="task-details-container">
+                                    <div class="task-details">
+                                        <p class="task-title">${s.title}</p>
+                                        <p class="task-description">${s.description}</p>
+                                    </div>
+                                    <span class="task-status" style="background-color: ${e}; color: ${o};">
+                                        ${t} ${(r = s.status) == null ? void 0 : r.title}
+                                    </span>
+                                </div>
+                            </li>
+                        `;
+    })}
                 </div>
 
-                ${q(this.showModal, () => m`
+                ${q(this.showModal, () => y`
                     <div>
@@ -508,15 +527,18 @@ <div class="dialog">
   }
-  updated(i) {
-    i.has("theme") && this.applyTheme();
+  updated(s) {
+    s.has("theme") && this.applyTheme();
   }
-  async upvoteTask(i) {
+  async upvoteTask(s) {
+    this.votes = { ...this.votes, [s.id]: (this.votes[s.id] ?? 0) + 1 };
     try {
-      const t = await fetch("/api/tasks/upvote", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ taskId: i.id, projectId: this.projectId })
+      const t = await fetch(`https://kanbancast.com/api/tasks/upvote/${s.id}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": `${this.apiKey}`
+        }
       });
       if (t.ok) {
         const e = await t.json();
-        i.votes = e.votes, console.log("Vote incremented successfully");
+        s.votes = e.votes, console.log("Vote incremented successfully");
       } else
@@ -529,3 +551,3 @@ console.error("Failed to increment votes");
 };
-a.styles = P`
+a.styles = C`
         /* Your existing styles */
@@ -638,8 +660,11 @@
         }
+        .task-details-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+        }
         .task-details {
-            flex-grow: 1;
             display: flex;
             flex-direction: column;
-            justify-content: space-between;
-            align-items: start;
         }
@@ -653,6 +678,18 @@ .task-title {
         .task-description {
-            margin-top:0;
+            margin-top: 0;
             padding-top: 0;
             font-size: small;
         }
+        .task-status {
+            display: inline-flex;
+            align-items: center;
+            max-width: 100%;
+            font-weight: bold;
+            line-height: 1.2;
+            border-radius: 12px;
+            font-size: 12px;
+            padding: 4px 8px;
+            height: fit-content;
+            white-space: nowrap;
+        }
 
@@ -683,8 +720,2 @@ .suggest-feature-button {
         }
-
-        svg {
-            fill: currentColor; /* To easily control the color via CSS */
-            width: 100%; /* Fit to container */
-            height: 100%; /* Fit to container */
-        }
     `;
@@ -707,12 +738,15 @@ l([
 l([
-  $()
+  b()
 ], a.prototype, "selectedTab", 2);
 l([
-  $()
+  b()
 ], a.prototype, "showModal", 2);
 l([
-  $()
+  b()
 ], a.prototype, "theme", 2);
+l([
+  b()
+], a.prototype, "votes", 2);
 a = l([
-  C("board-view")
+  T("board-view")
 ], a);
@@ -719,0 +753,0 @@ export {

package.json

 {
   "name": "kanbancast-components",
   "private": false,
-  "version": "1.0.20",
+  "version": "1.1.0",
   "type": "module",
@@ -6,0 +6,0 @@ "types": "dist/board-view.d.ts",

src/board-view.ts

@@ -1,8 +0,5 @@
-// src/BoardView.ts
 import { LitElement, html, css } from 'lit';
 import { property, customElement, state } from 'lit/decorators.js';
-// import {classMap} from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
 
-
 interface Status {
@@ -29,13 +26,12 @@ id: number;
     @property({ type: Array }) statuses: Status[] = [/* Your existing statuses */];
-    @property({ type: Number }) projectId: number = 4;
+    @property({ type: Number }) projectId: number = 1;
     @property({ type: String }) newTaskTitle: string = '';
     @property({ type: String }) newTaskDescription: string = '';
-    @property({type: String}) apiKey:string='ilfYeZiUOU9q';
+    @property({ type: String }) apiKey: string = 'xMFmZ0mI9OT5';
 
     @state() selectedTab: string = 'Active';
-    @state() showModal:boolean = false;
-    @state() theme: string = 'light'; // D
+    @state() showModal: boolean = false;
+    @state() theme: string = 'light';
+    @state() votes: { [taskId: number]: number } = {};
 
-
-
     static styles = css`
@@ -149,8 +145,11 @@ /* Your existing styles */
         }
+        .task-details-container {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+        }
         .task-details {
-            flex-grow: 1;
             display: flex;
             flex-direction: column;
-            justify-content: space-between;
-            align-items: start;
         }
@@ -164,6 +163,18 @@ .task-title {
         .task-description {
-            margin-top:0;
+            margin-top: 0;
             padding-top: 0;
             font-size: small;
         }
+        .task-status {
+            display: inline-flex;
+            align-items: center;
+            max-width: 100%;
+            font-weight: bold;
+            line-height: 1.2;
+            border-radius: 12px;
+            font-size: 12px;
+            padding: 4px 8px;
+            height: fit-content;
+            white-space: nowrap;
+        }
 
@@ -194,8 +205,2 @@ .suggest-feature-button {
         }
-
-        svg {
-            fill: currentColor; /* To easily control the color via CSS */
-            width: 100%; /* Fit to container */
-            height: 100%; /* Fit to container */
-        }
     `;
@@ -208,4 +213,3 @@
 
-    connectedCallback()
-    {
+    connectedCallback() {
         this.fetchStatuses();
@@ -221,4 +225,3 @@ super.connectedCallback();
         try {
-            const response = await fetch(`https://kanbancast.com/api/projects`,
-                {
+            const response = await fetch(`https://kanbancast.com/api/projects`, {
                 method: 'GET',
@@ -235,2 +238,3 @@ headers: {
                 console.log('Statuses fetched successfully');
+                this.initializeVotes();
             } else {
@@ -245,4 +249,12 @@ console.log(response);
 
+    initializeVotes() {
+        this.statuses.forEach(status => {
+            status.tasks.forEach(task => {
+                this.votes[task.id] = task.votes ?? 1;
+            });
+        });
+    }
+
     get tasksForSelectedTab() {
-        const activeStatuses = ['To Do', 'In Progress', 'Pending', 'Review'];
+        const activeStatuses = ['To Do', 'In Progress', 'Pending', 'Review', 'Requested'];
         const doneStatuses = ['Done', 'Published'];
@@ -265,16 +277,12 @@ const relevantStatuses = this.selectedTab === 'Active' ? activeStatuses : doneStatuses;
     async submitNewTask() {
-        const newTask = {
-            title: this.newTaskTitle,
-            description: this.newTaskDescription,
-            status_id: 1 // Assuming new tasks go to "Pending" status
-        };
+        const title = encodeURIComponent(this.newTaskTitle);
+        const description = encodeURIComponent(this.newTaskDescription);
 
         try {
-            const response = await fetch(`https://kanbancast.com/api/projects/${this.projectId}/tasks`, {
-                method: 'POST',
+            const response = await fetch(`https://kanbancast.com/api/tasks/create?title=${title}&description=${description}`, {
+                method: 'GET',
                 headers: {
                     'Content-Type': 'application/json',
-                    'Authorization': `Bearer ${this.apiKey}`
-                },
-                body: JSON.stringify(newTask)
+                    'x-api-key': `${this.apiKey}`
+                }
             });
@@ -285,4 +293,5 @@
                 const pendingStatus = this.statuses.find(status => status.slug === 'pending');
-                pendingStatus?.tasks.push(data);
-                this.showModal=false;
+                pendingStatus?.tasks.push(data.task);
+                this.votes[data.task.id] = data.task.votes ?? 1;
+                this.showModal = false;
             } else {
@@ -296,2 +305,18 @@ console.error('Failed to submit new task');
 
+
+    getStatusStyles(statusTitle: string) {
+        switch (statusTitle) {
+            case 'Requested':
+                return { emoji: '🙏', bgColor: '#f0f8ff', textColor: '#0000ff' };
+            case 'Done':
+                return { emoji: '✅', bgColor: '#e0ffe0', textColor: '#008000' };
+            case 'To Do':
+                return { emoji: '📝', bgColor: '#fff0e0', textColor: '#ff8c00' };
+            case 'In Progress':
+                return { emoji: '🏗️', bgColor: '#f0e68c', textColor: '#ffd700' };
+            default:
+                return { emoji: '', bgColor: '#f0f0f0', textColor: '#000000' };
+        }
+    }
+
     render() {
@@ -314,22 +339,28 @@ return html`
                         </button>
-
                     </div>
                     <button @click=${() => this.showModal = true} class="suggest-feature-button">Suggest a Feature
                     </button>
-
                 </div>
 
-
                 <div class="tasks-list">
-                    ${this.tasksForSelectedTab.map(task => html`
-                        <li class="task-item">
-                            <button @click=${() => this.upvoteTask(task)} class="upvote-button">
-                                <span class="votes-count">${task.votes ?? 1}</span>
-                            </button>
-                            <div class="task-details">
-                                <p class="task-title">${task.title}</p>
-                                <p class="task-description">${task.description}</p>
-                            </div>
-                        </li>
-                    `)}
+                    ${this.tasksForSelectedTab.map(task => {
+            const { emoji, bgColor, textColor } = this.getStatusStyles(task.status?.title ?? '');
+            return html`
+                            <li class="task-item">
+                                <button @click=${() => this.upvoteTask(task)} class="upvote-button">
+                                    <svg fill="#000000" xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 1.3 1.3" enable-background="new 0 0 52 52" xml:space="preserve"><path d="M1.093 0.95H0.208c-0.025 0 -0.043 -0.033 -0.023 -0.055l0.433 -0.53c0.015 -0.02 0.048 -0.02 0.063 0l0.438 0.53c0.017 0.023 0.003 0.055 -0.025 0.055"/></svg>
+                                    <span class="votes-count">${this.votes[task.id] ?? 1}</span>
+                                </button>
+                                <div class="task-details-container">
+                                    <div class="task-details">
+                                        <p class="task-title">${task.title}</p>
+                                        <p class="task-description">${task.description}</p>
+                                    </div>
+                                    <span class="task-status" style="background-color: ${bgColor}; color: ${textColor};">
+                                        ${emoji} ${task.status?.title}
+                                    </span>
+                                </div>
+                            </li>
+                        `;
+        })}
                 </div>
@@ -365,7 +396,10 @@
     async upvoteTask(task: Task) {
+        this.votes = { ...this.votes, [task.id]: (this.votes[task.id] ?? 0) + 1 };
         try {
-            const response = await fetch(`/api/tasks/upvote`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ taskId: task.id, projectId: this.projectId })
+            const response = await fetch(`https://kanbancast.com/api/tasks/upvote/${task.id}`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-api-key': `${this.apiKey}`
+                }
             });
@@ -383,2 +417,3 @@
         }
+
     }
@@ -391,2 +426,2 @@ }
     }
-}
+}

No alert changes

Improved metrics

Total package byte prevSize

43199

10.78%

Lines of code

1241

7.63%

No dependency changes