@piveau/dpi 0.2.0-alpha.12 → 0.2.0-alpha.14

package/dist/packages/dpi/src/data-provider-interface/components/dev-tools/ProjectDpiDevTools.vue2.js

@@ -1,23 +1,25 @@
-import { defineComponent as T, useModel as V, ref as f, createBlock as _, openBlock as v, withCtx as o, createElementVNode as n, createVNode as t, unref as l, createTextVNode as y, createElementBlock as N } from "vue";
-import { TabGroup as w, TabList as E, Tab as g, TabPanels as A, TabPanel as O } from "@headlessui/vue";
-import { PhStar as F, PhFloppyDisk as x } from "@phosphor-icons/vue";
-import { useStorage as B } from "@vueuse/core";
-import { decodeProject as M } from "../../composables/project-transformer/decodeProject.js";
-import { encodeProject as G } from "../../composables/project-transformer/encodeProject.js";
-import { useFormValues as z } from "../../composables/useDpiFormValues.js";
-import u from "../../HappyFlowComponents/ui/ButtonV3.vue.js";
-import b from "../../HappyFlowComponents/ui/Card.vue.js";
-import I from "../../HappyFlowComponents/ui/DpiModalBase.vue.js";
-import U from "../../HappyFlowComponents/ui/ListBox/Listbox.vue.js";
-import H from "../../HappyFlowComponents/ui/TextAreaV3.vue.js";
-import { fullProject as K } from "./fixtures.js";
-const R = { class: "tab-wrapper" }, Y = { class: "hurry" }, q = { class: "hurry-actions" }, Q = {
+import { defineComponent as w, useModel as O, ref as f, createBlock as I, openBlock as h, withCtx as o, createElementVNode as n, createVNode as t, unref as l, createTextVNode as v, createElementBlock as g } from "vue";
+import { TabGroup as F, TabList as A, Tab as x, TabPanels as B, TabPanel as D } from "@headlessui/vue";
+import { PhStar as M, PhFloppyDisk as S } from "@phosphor-icons/vue";
+import { useStorage as z } from "@vueuse/core";
+import { useRouter as G } from "vue-router";
+import { decodeProject as U } from "../../composables/project-transformer/decodeProject.js";
+import { encodeProject as R } from "../../composables/project-transformer/encodeProject.js";
+import { useFormValues as q } from "../../composables/useDpiFormValues.js";
+import s from "../../HappyFlowComponents/ui/ButtonV3.vue.js";
+import y from "../../HappyFlowComponents/ui/Card.vue.js";
+import H from "../../HappyFlowComponents/ui/DpiModalBase.vue.js";
+import K from "../../HappyFlowComponents/ui/InputField.vue.js";
+import Y from "../../HappyFlowComponents/ui/ListBox/Listbox.vue.js";
+import Q from "../../HappyFlowComponents/ui/TextAreaV3.vue.js";
+import { fullProject as W } from "./fixtures.js";
+const X = { class: "tab-wrapper" }, Z = { class: "hurry" }, $ = { class: "hurry-actions" }, ee = {
   key: 0,
   class: "hurry-flurry"
-}, W = {
+}, te = {
   key: 1,
   class: "hurry-flurry-empty"
-}, X = { class: "hurry" }, Z = { class: "hurry-actions" }, $ = "dpi:project:snapshots", me = /* @__PURE__ */ T({
+}, oe = { class: "hurry" }, ae = { class: "hurry-actions" }, le = { class: "hurry" }, ne = { class: "hurry-actions" }, re = "dpi:project:snapshots", Oe = /* @__PURE__ */ w({
   __name: "ProjectDpiDevTools",
   props: {
     modelValue: { type: Boolean },
@@ -28,74 +30,80 @@ const R = { class: "tab-wrapper" }, Y = { class: "hurry" }, q = { class: "hurry-
     nonceModifiers: {}
   },
   emits: ["update:modelValue", "update:nonce"],
-  setup(h) {
-    const S = V(h, "modelValue"), m = V(h, "nonce"), { formValues: p } = z(), c = f(""), i = f("");
-    function k() {
-      m.value++, p.value = K.formValuesFn();
+  setup(V) {
+    const k = G(), N = O(V, "modelValue"), b = O(V, "nonce"), { formValues: p } = q(), c = f(""), u = f(""), m = f("");
+    function C() {
+      b.value++, p.value = W.formValuesFn();
     }
-    const d = B($, []), s = f("");
-    function C(a) {
+    const d = z(re, []), i = f("");
+    function J(a) {
       return new Date(a).toLocaleString();
     }
-    function J() {
+    function L() {
       const a = Date.now(), e = {
         id: String(a),
-        name: C(a),
+        name: J(a),
         createdAt: a,
         // ensure we store a plain JSON object without references
         data: JSON.parse(JSON.stringify(p.value))
       };
-      d.value = [...d.value, e], s.value = e;
+      d.value = [...d.value, e], i.value = e;
     }
-    function L() {
-      !s.value || typeof s.value == "string" || (m.value++, p.value = JSON.parse(JSON.stringify(s.value.data)));
+    function P() {
+      !i.value || typeof i.value == "string" || (b.value++, p.value = JSON.parse(JSON.stringify(i.value.data)));
     }
-    async function D() {
-      i.value = "";
+    async function T() {
+      u.value = "";
       try {
-        const a = JSON.parse(c.value), e = await M(a);
-        m.value++, p.value = JSON.parse(JSON.stringify(e));
+        const a = JSON.parse(c.value), e = await U(a);
+        b.value++, p.value = JSON.parse(JSON.stringify(e));
       } catch (a) {
-        i.value = a instanceof Error ? a.message : "Failed to load JSON-LD";
+        u.value = a instanceof Error ? a.message : "Failed to load JSON-LD";
       }
     }
-    async function P() {
-      i.value = "";
+    async function j() {
+      u.value = "";
       try {
-        const a = G(p.value), e = JSON.stringify(a, null, 2);
+        const a = R(p.value, { identifier: "TODO" }), e = JSON.stringify(a, null, 2);
         c.value = e;
       } catch (a) {
-        i.value = a instanceof Error ? a.message : "Failed to encode project";
+        u.value = a instanceof Error ? a.message : "Failed to encode project";
       }
     }
-    function j() {
-      d.value = [], s.value = "";
+    function _() {
+      m.value && k.push({
+        path: "/dpi/project/datasets",
+        query: { locale: "de", edit: "true", id: m.value }
+      });
+    }
+    function E() {
+      d.value = [], i.value = "";
     }
-    return (a, e) => (v(), _(I, {
-      modelValue: S.value,
-      "onUpdate:modelValue": e[2] || (e[2] = (r) => S.value = r)
+    return (a, e) => (h(), I(H, {
+      modelValue: N.value,
+      "onUpdate:modelValue": e[3] || (e[3] = (r) => N.value = r)
     }, {
-      header: o(() => e[3] || (e[3] = [
+      header: o(() => e[4] || (e[4] = [
         n("h4", null, "DPI Tools for Devs", -1)
       ])),
       default: o(() => [
-        n("div", R, [
-          t(l(w), null, {
+        n("div", X, [
+          t(l(F), null, {
             default: o(() => [
-              t(l(E), { class: "tab-list" }, {
+              t(l(A), { class: "tab-list" }, {
                 default: o(() => [
-                  t(l(g), { as: "template" }, {
+                  t(l(x), { as: "template" }, {
                     default: o(({ selected: r }) => [
-                      t(u, {
+                      t(s, {
                         variant: r ? "secondary" : "tertiary",
                         "button-text": "Form"
                       }, null, 8, ["variant"])
                     ]),
                     _: 1
                   }),
-                  t(l(g), { as: "template" }, {
+                  t(l(x), { as: "template" }, {
                     default: o(({ selected: r }) => [
-                      t(u, {
+                      t(s, {
                         variant: r ? "secondary" : "tertiary",
                         "button-text": "Edit Mode"
                       }, null, 8, ["variant"])
@@ -105,80 +113,80 @@ const R = { class: "tab-wrapper" }, Y = { class: "hurry" }, q = { class: "hurry-
                 ]),
                 _: 1
               }),
-              t(l(A), { class: "tab-panels" }, {
+              t(l(B), { class: "tab-panels" }, {
                 default: o(() => [
-                  t(l(O), null, {
+                  t(l(D), null, {
                     default: o(() => [
-                      e[9] || (e[9] = n("p", null, "Manage current state of the form data model", -1)),
-                      t(b, null, {
-                        title: o(() => e[4] || (e[4] = [
-                          y(" Presets ", -1)
+                      e[10] || (e[10] = n("p", null, "Manage current state of the form data model", -1)),
+                      t(y, null, {
+                        title: o(() => e[5] || (e[5] = [
+                          v(" Presets ", -1)
                         ])),
                         icon: o(() => [
-                          t(l(F), {
+                          t(l(M), {
                             size: 32,
                             color: "#009fe3"
                           })
                         ]),
                         default: o(() => [
                           n("div", null, [
-                            t(u, {
+                            t(s, {
                               "icon-start": "Check",
                               "button-text": "Autofill inputs and reload DPI",
                               variant: "primary",
-                              onClick: k
+                              onClick: C
                             }),
-                            e[5] || (e[5] = n("p", { class: "mt-3" }, " Preset contains complete form values ", -1))
+                            e[6] || (e[6] = n("p", { class: "mt-3" }, " Preset contains complete form values ", -1))
                           ])
                         ]),
                         _: 1
                       }),
-                      t(b, { class: "mt-3" }, {
-                        title: o(() => e[6] || (e[6] = [
-                          y(" Snapshots ", -1)
+                      t(y, { class: "mt-3" }, {
+                        title: o(() => e[7] || (e[7] = [
+                          v(" Snapshots ", -1)
                         ])),
                         icon: o(() => [
-                          t(l(x), {
+                          t(l(S), {
                             size: 32,
                             color: "#009fe3"
                           })
                         ]),
                         default: o(() => [
-                          n("div", Y, [
-                            e[8] || (e[8] = n("p", null, " Snapshots are stored locally in your browser ", -1)),
-                            n("div", q, [
-                              t(u, {
+                          n("div", Z, [
+                            e[9] || (e[9] = n("p", null, " Snapshots are stored locally in your browser ", -1)),
+                            n("div", $, [
+                              t(s, {
                                 class: "mb-3",
                                 "icon-start": "plus",
                                 "button-text": "Save snapshot",
                                 variant: "secondary",
-                                onClick: J
+                                onClick: L
                               }),
-                              t(u, {
+                              t(s, {
                                 class: "mb-3",
                                 "icon-start": "trash",
                                 "button-text": "Clear all snapshots",
                                 variant: "tertiary",
                                 disabled: !l(d).length,
-                                onClick: j
+                                onClick: E
                               }, null, 8, ["disabled"])
                             ]),
-                            l(d).length ? (v(), N("div", Q, [
-                              t(U, {
-                                modelValue: s.value,
-                                "onUpdate:modelValue": e[0] || (e[0] = (r) => s.value = r),
+                            l(d).length ? (h(), g("div", ee, [
+                              t(Y, {
+                                modelValue: i.value,
+                                "onUpdate:modelValue": e[0] || (e[0] = (r) => i.value = r),
                                 label: "Select snapshot",
                                 placeholder: "Choose a snapshot",
                                 options: l(d)
                               }, null, 8, ["modelValue", "options"]),
-                              t(u, {
+                              t(s, {
                                 "icon-end": "Check",
                                 "button-text": "Load snapshot",
                                 variant: "tertiary",
-                                disabled: !s.value,
-                                onClick: L
+                                disabled: !i.value,
+                                onClick: P
                               }, null, 8, ["disabled"])
-                            ])) : (v(), N("div", W, e[7] || (e[7] = [
+                            ])) : (h(), g("div", te, e[8] || (e[8] = [
                               n("span", { class: "copy-small-regular" }, "No snapshots saved", -1)
                             ])))
                           ])
@@ -187,42 +195,77 @@ const R = { class: "tab-wrapper" }, Y = { class: "hurry" }, q = { class: "hurry-
                       })
                     ]),
                     _: 1,
-                    __: [9]
+                    __: [10]
                   }),
-                  t(l(O), null, {
+                  t(l(D), null, {
                     default: o(() => [
-                      t(b, null, {
-                        title: o(() => e[10] || (e[10] = [
-                          y(" Load from JSON-LD ", -1)
+                      t(y, null, {
+                        title: o(() => e[11] || (e[11] = [
+                          v(" Load from JSON-LD ", -1)
                         ])),
                         icon: o(() => [
-                          t(l(x), {
+                          t(l(S), {
                             size: 32,
                             color: "#009fe3"
                           })
                         ]),
                         default: o(() => [
-                          n("div", X, [
-                            t(H, {
+                          n("div", oe, [
+                            t(Q, {
                               modelValue: c.value,
                               "onUpdate:modelValue": e[1] || (e[1] = (r) => c.value = r),
                               label: "JSON-LD",
                               placeholder: "Paste a JSON-LD document here (GraphObject or NodeObject)",
-                              "show-error": !!i.value,
-                              "error-message": i.value
+                              "show-error": !!u.value,
+                              "error-message": u.value
                             }, null, 8, ["modelValue", "show-error", "error-message"]),
-                            n("div", Z, [
-                              t(u, {
+                            n("div", ae, [
+                              t(s, {
                                 "button-text": "Generate JSON-LD in textarea",
                                 variant: "secondary",
-                                onClick: P
+                                onClick: j
                               }),
-                              t(u, {
+                              t(s, {
                                 "icon-end": "Check",
                                 "button-text": "Load from json-ld",
                                 variant: "primary",
                                 disabled: !c.value,
-                                onClick: D
+                                onClick: T
+                              }, null, 8, ["disabled"])
+                            ])
+                          ])
+                        ]),
+                        _: 1
+                      }),
+                      t(y, { class: "mt-3" }, {
+                        title: o(() => e[12] || (e[12] = [
+                          v(" Edit by ID ", -1)
+                        ])),
+                        icon: o(() => [
+                          t(l(S), {
+                            size: 32,
+                            color: "#009fe3"
+                          })
+                        ]),
+                        default: o(() => [
+                          n("div", le, [
+                            t(K, {
+                              modelValue: m.value,
+                              "onUpdate:modelValue": e[2] || (e[2] = (r) => m.value = r),
+                              label: "ID",
+                              placeholder: "Enter ID to edit",
+                              "add-on-text": !1,
+                              "date-picker": !1,
+                              "info-icon": !1,
+                              "show-end-icon": !1,
+                              "pre-icon": !1
+                            }, null, 8, ["modelValue"]),
+                            n("div", ne, [
+                              t(s, {
+                                "button-text": "Open edit mode",
+                                variant: "primary",
+                                disabled: !m.value,
+                                onClick: _
                               }, null, 8, ["disabled"])
                             ])
                           ])
@@ -245,5 +288,5 @@ const R = { class: "tab-wrapper" }, Y = { class: "hurry" }, q = { class: "hurry-
   }
 });
 export {
-  me as default
+  Oe as default
 };