upend/ui/src/views/Inspect.vue

<template>
  <div class="inspect">
    <h2>
      <Address
        :address="address"
        :is-file="backlinks.some(([_, e]) => e.attribute === 'FILE_IS')"
        :resolve="false"
      />
    </h2>
    <div v-if="!error">
      <template v-if="attributes.length">
        <h3>Own attributes ({{ attributes.length }})</h3>
        <table>
          <tr>
            <th></th>
            <th>Attribute name</th>
            <th>Value</th>
          </tr>
          <tr v-for="[id, entry] in attributes" :key="id">
            <td>
              <sl-icon-button name="x-circle" @click="removeEntry(id)" />
            </td>
            <td>{{ entry.attribute }}</td>
            <td>
              <Address
                link
                v-if="entry.value.t === 'Address'"
                :address="entry.value.c"
              />
              <template v-else>
                {{ entry.value.c }}
              </template>
            </td>
          </tr>
          <tr>
            <td>
              <sl-icon-button name="plus-circle" @click="addEntry()" />
            </td>
            <td>
              <sl-input v-sl-model:newEntryAttribute />
            </td>
            <td>
              <sl-input v-sl-model:newEntryValue />
            </td>
          </tr>
        </table>
      </template>
      <template v-if="backlinks.length">
        <h3>Referred to ({{ backlinks.length }})</h3>
        <table>
          <tr>
            <th>Entities</th>
            <th>Attribute names</th>
          </tr>
          <tr v-for="[id, entry] in backlinks" :key="id">
            <td>
              <Address link :address="entry.entity" />
            </td>
            <td>
              {{ entry.attribute }}
            </td>
          </tr>
        </table>
      </template>
    </div>
    <div v-else class="error">
      {{ error }}
    </div>
  </div>
</template>

<script lang="ts">
import Address from "@/components/Address.vue";
import { useEntity } from "@/lib/entity";
import { defineComponent } from "vue";

export default defineComponent({
  name: "Inspect",
  components: {
    Address,
  },
  props: {
    address: {
      type: String,
      required: true,
    },
  },
  data: () => {
    return {
      newEntryAttribute: "",
      newEntryValue: "",
    };
  },
  methods: {
    async removeEntry(id: string) {
      if (confirm("Are you sure you want to remove the attribute?")) {
        await fetch(`/api/obj/${id}`, { method: "DELETE" });
        await this.mutate();
      }
    },
    async addEntry() {
      await fetch(`/api/obj`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          entity: this.address,
          attribute: this.newEntryAttribute,
          value: {
            t: "Value",
            c: this.newEntryValue,
          },
        }),
      });

      await this.mutate();

      this.newEntryAttribute = "";
      this.newEntryValue = "";
    },
  },
  setup(props) {
    const { error, mutate, attributes, backlinks } = useEntity(props.address);

    return {
      attributes,
      backlinks,
      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>