upend/ui/src/views/Inspect.vue

<template>
  <div class="inspect">
    <h2>
      <Address :address="address" :is-file="backlinks.some(([_, e]) => e.key === 'FILE_IS')"/>
    </h2>
    <div v-if="!error">
      <template v-if="attributes.length">
        <h3>Own attributes ({{ attributes.length }})</h3>
        <table>
          <tr>
            <th></th>
            <th>Key name</th>
            <th>Value</th>
          </tr>
          <tr v-for="[id, entry] in attributes">
            <td>
              <sl-icon-button name="x-circle" @click="removeAttribute(id)"/>
            </td>
            <td>{{ entry.key }}</td>
            <td>
              <Address link v-if="entry.value.t === 'Address'" :address="entry.value.c"/>
              <template v-else>
                {{ entry.value.c }}
              </template>
            </td>
          </tr>
        </table>
      </template>
      <template v-if="backlinks.length">
        <h3>Referred to ({{ backlinks.length }})</h3>
        <table>
          <tr>
            <th>Targets</th>
            <th>Key names</th>
          </tr>
          <tr v-for="[id, entry] in backlinks">
            <td>
              <Address link :address="entry.target"/>
            </td>
            <td>
              {{ entry.key }}
            </td>
          </tr>
        </table>
      </template>
    </div>
    <div v-else class="error">
      {{ error }}
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
import useSWRV from "swrv";
import {fetcher} from "@/utils";
import {IEntry, ListingResult} from "@/types/base";
import Address from "@/components/Address.vue";

export default defineComponent({
  name: "Inspect",
  components: {
    Address,
  },
  props: {
    "address": String
  },
  computed: {
    objectEntries(): [string, IEntry][] {
      if (this.data) {
        const entries = Object.entries(this.data) as [string, IEntry][];
        return entries
          .sort(([_, a], [__, b]) => a.value.c.localeCompare(b.value.c))
          .sort(([_, a], [__, b]) => a.value.t.localeCompare(b.value.t))
          .sort(([_, a], [__, b]) => a.key.localeCompare(b.key));
      } else {
        return [];
      }
    },
    attributes(): [string, IEntry][] {
      return this.objectEntries.filter(([_, e]) => e.target === this.address);
    },
    backlinks(): [string, IEntry][] {
      return this.objectEntries.filter(([_, e]) => e.target !== this.address);
    }
  },
  methods: {
    async removeAttribute(id: string) {
      if (confirm("Are you sure you want to remove the attribute?")) {
        await fetch(`/api/obj/${id}`, {method: "DELETE"});
        await this.mutate();
      }
    }
  },
  setup(props) {
    const {data, error, mutate} = useSWRV<ListingResult, unknown>(() => `/api/obj/${props.address}`, fetcher);

    return {
      data,
      error,
      mutate
    };
  }
});
</script>

<style scoped lang="scss">
table {
  th {
    text-align: left;
  }

  td {
    font-family: var(--monospace-font);
    padding-right: 1em;
  }
}

.error {
  color: red;
}
</style>