@fonderie/vue-admin-screens 0.5.0 → 0.6.0

package/dist/index.js

@@ -547,23 +547,39 @@ var TokensScreen = defineComponent7({
 });
 
 // src/screens/UsersScreen.ts
-import { useAdminLoginHistory, useAdminUser, useAdminUserSessions } from "@fonderie/vue-admin";
+import {
+  useAdminLoginHistory,
+  useAdminUser,
+  useAdminUserSessions,
+  useAdminUsers
+} from "@fonderie/vue-admin";
 import { computed, defineComponent as defineComponent8, h as h9, ref as ref2 } from "vue";
 var UsersScreen = defineComponent8({
   name: "FonderieUsersScreen",
-  props: { client: { type: Object, required: true } },
+  props: {
+    client: { type: Object, required: true },
+    pageSize: { type: Number, default: 50 }
+  },
   setup(props) {
     const input = ref2("");
     const email = ref2("");
+    const selectedId = ref2("");
+    const list = useAdminUsers(props.client, { limit: props.pageSize });
     const { user, isLoading, error, suspend, unsuspend, revokeSessions } = useAdminUser(
       props.client,
-      { email }
+      { email, id: selectedId }
     );
     const userId = computed(() => user.value?.id ?? null);
     const sessions = useAdminUserSessions(props.client, userId);
     const history = useAdminLoginHistory(props.client, userId, { limit: 20 });
+    const showList = computed(() => !email.value && !selectedId.value);
     const yesNo = (v) => h9("span", { style: v ? styles.ok : styles.muted }, v ? "yes" : "no");
     const row = (k, v) => h9("tr", [td(k), td(v)]);
+    const clear = () => {
+      email.value = "";
+      selectedId.value = "";
+      input.value = "";
+    };
     return () => {
       const u = user.value;
       return h9("div", { style: styles.container }, [
@@ -574,6 +590,7 @@ var UsersScreen = defineComponent8({
             style: styles.toolbar,
             onSubmit: (e) => {
               e.preventDefault();
+              selectedId.value = "";
               email.value = input.value.trim();
             }
           },
@@ -590,9 +607,48 @@ var UsersScreen = defineComponent8({
               "button",
               { type: "submit", style: styles.button, disabled: isLoading.value },
               "Look up"
-            )
+            ),
+            showList.value ? refreshButton("Refresh", list.isLoading.value, () => void list.refresh()) : refreshButton("\u2190 All users", false, clear)
           ]
         ),
+        showList.value ? h9("div", [
+          list.error.value ? h9("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+          list.users.value.length === 0 && !list.isLoading.value ? h9("p", { style: styles.muted }, "No users yet.") : table(
+            ["Email", "Name", "Created", "Status"],
+            list.users.value.map(
+              (u2) => h9("tr", { key: u2.id }, [
+                td(
+                  h9(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...styles.navItem, padding: 0 },
+                      onClick: () => selectedId.value = u2.id
+                    },
+                    u2.email
+                  )
+                ),
+                td(
+                  `${u2.firstName ?? ""} ${u2.lastName ?? ""}`.trim() || h9("span", { style: styles.muted }, "\u2014")
+                ),
+                td(new Date(u2.createdAt).toLocaleDateString()),
+                td(
+                  u2.suspended ? h9("span", { style: styles.badge }, "suspended") : u2.deletedAt ? h9("span", { style: styles.badge }, "deleted") : h9("span", { style: styles.muted }, "active")
+                )
+              ])
+            )
+          ),
+          list.isLoading.value ? h9("p", { style: styles.status }, "Loading\u2026") : null,
+          list.hasMore.value && !list.isLoading.value ? h9(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.button, marginTop: "8px" },
+              onClick: () => void list.loadMore()
+            },
+            "Load more"
+          ) : null
+        ]) : null,
         error.value ? h9(
           "p",
           { style: styles.error, role: "alert" },
@@ -751,16 +807,26 @@ var CatalogScreen = defineComponent9({
 });
 
 // src/screens/SubscriberScreen.ts
-import { useAdminSubscriber } from "@fonderie/vue-admin";
+import { useAdminSubscriber, useAdminSubscribers } from "@fonderie/vue-admin";
 import { defineComponent as defineComponent10, h as h11, ref as ref3 } from "vue";
 var SubscriberScreen = defineComponent10({
   name: "FonderieSubscriberScreen",
-  props: { client: { type: Object, required: true } },
+  props: {
+    client: { type: Object, required: true },
+    pageSize: { type: Number, default: 50 }
+  },
   setup(props) {
     const type = ref3("user");
     const idInput = ref3("");
     const subscriber = ref3(null);
+    const list = useAdminSubscribers(props.client, { limit: props.pageSize });
     const { subscription, wallet, ledger, hasMoreLedger, isLoading, error, loadMoreLedger, grant } = useAdminSubscriber(props.client, subscriber, { limit: 20 });
+    const open = (t, id) => {
+      granted.value = null;
+      type.value = t;
+      idInput.value = id;
+      subscriber.value = { type: t, id };
+    };
     const amount = ref3("");
     const note = ref3("");
     const granted = ref3(null);
@@ -805,9 +871,69 @@ var SubscriberScreen = defineComponent10({
               "button",
               { type: "submit", style: styles.button, disabled: isLoading.value },
               "Look up"
+            ),
+            subscriber.value ? h11(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                onClick: () => {
+                  subscriber.value = null;
+                  idInput.value = "";
+                  granted.value = null;
+                }
+              },
+              "\u2190 All subscribers"
+            ) : h11(
+              "button",
+              {
+                type: "button",
+                style: styles.button,
+                disabled: list.isLoading.value,
+                onClick: () => void list.refresh()
+              },
+              "Refresh"
             )
           ]
         ),
+        !subscriber.value ? h11("div", [
+          list.error.value ? h11("p", { style: styles.error, role: "alert" }, list.error.value.explanation) : null,
+          list.subscriptions.value.length === 0 && !list.isLoading.value ? h11("p", { style: styles.muted }, "No subscribers yet.") : table(
+            ["Subscriber", "Plan", "Status", "Renews"],
+            list.subscriptions.value.map(
+              (sub) => h11("tr", { key: sub.id }, [
+                td(
+                  h11(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...styles.navItem, padding: 0, ...styles.mono },
+                      onClick: () => open(sub.subscriberType, sub.subscriberId)
+                    },
+                    `${sub.subscriberType}/${sub.subscriberId}`
+                  )
+                ),
+                td(`${sub.plan} \xB7 ${sub.interval}`),
+                td(
+                  sub.cancelAtPeriodEnd ? [sub.status, " ", h11("span", { style: styles.badge }, "cancels")] : sub.status
+                ),
+                td(
+                  sub.currentPeriodEnd ? new Date(sub.currentPeriodEnd).toLocaleDateString() : h11("span", { style: styles.muted }, "\u2014")
+                )
+              ])
+            )
+          ),
+          list.isLoading.value ? h11("p", { style: styles.status }, "Loading\u2026") : null,
+          list.hasMore.value && !list.isLoading.value ? h11(
+            "button",
+            {
+              type: "button",
+              style: { ...styles.button, marginTop: "8px" },
+              onClick: () => void list.loadMore()
+            },
+            "Load more"
+          ) : null
+        ]) : null,
         error.value ? h11("p", { style: styles.error, role: "alert" }, error.value.explanation) : null,
         subscriber.value && !isLoading.value ? [
           h11("h2", { style: styles.subtitle }, "Subscription"),