AstralRinth/theseus_gui/src/pages/instance/Mods.vue

<template>
  <Card class="mod-card">
    <div class="card-row">
      <div class="iconified-input">
        <SearchIcon/>
        <input
          type="text"
          placeholder="Search Mods"
          v-model="searchFilter"
        />
      </div>
      <span class="manage">
        <span class="text-combo">
          Sort By
          <DropdownSelect :options="['Name', 'Version', 'Author']" v-model="sortFilter" default-value="Name" class="dropdown"/>
        </span>
        <Button color="primary">
        <PlusIcon />
        Add Mods
      </Button>
      </span>
    </div>
    <div class="table-container">
      <div class="table-row table-head">
        <div class="table-cell table-text">
          <Button color="success" iconOnly>
            <UpdatedIcon />
          </Button>
        </div>
        <div class="table-cell table-text name-cell"> Name </div>
        <div class="table-cell table-text"> Version </div>
        <div class="table-cell table-text"> Author </div>
        <div class="table-cell table-text"> Actions </div>
      </div>
      <div class="table-row" v-for="mod in search" :key="mod.name">
        <div class="table-cell table-text">
          <Button v-if="mod.outdated" iconOnly>
            <UpdatedIcon />
          </Button>
          <Button v-else disabled iconOnly>
            <CheckCircleIcon/>
          </Button>
        </div>
        <div class="table-cell table-text name-cell">
          <span class="mod-text">
            <Avatar :src="mod.icon"/>
            {{ mod.name }}
          </span>
        </div>
        <div class="table-cell table-text"> {{ mod.version }} </div>
        <div class="table-cell table-text"> {{ mod.author }} </div>
        <div class="table-cell table-text manage">
          <Button iconOnly>
            <TrashIcon />
          </Button>
          <input
            type="checkbox"
            class="switch stylized-toggle"
            id="switch-1"
            checked
          />
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
export default {
  name: "Mods",
  data() {
    return {
      searchFilter: "",
      sortFilter: "",
      mods: [
        {
          name: "Fabric API",
          icon: "https://cdn.modrinth.com/data/P7dR8mSH/icon.png",
          version: "0.76.0+1.19.4",
          author: "modmuss50",
          description: "Lightweight and modular API providing common hooks and intercompatibility measures utilized by mods using the Fabric toolchain.",
          outdated: true
        },
        {
          name: "Spirit",
          icon: "https://cdn.modrinth.com/data/b1LdOZlE/465598dc5d89f67fb8f8de6def21240fa35e3a54.png",
          version: "2.2.4",
          author: "CodexAdrian",
          description: "Create your own configurable mob spawner!",
          outdated: true
        },
        {
          name: "Botarium",
          icon: "https://cdn.modrinth.com/data/2u6LRnMa/98b286b0d541ad4f9409e0af3df82ad09403f179.gif",
          version: "2.0.5",
          author: "CodexAdrian",
          description: "A crossplatform API for devs that makes transfer and storage of items, fluids and energy easier, as well as some other helpful things",
          outdated: true
        },
        {
          name: "Tempad",
          icon: "https://cdn.modrinth.com/data/gKNwt7xu/icon.gif",
          version: "2.2.4",
          author: "CodexAdrian",
          description: "Create a portal to anywhere from anywhere",
          outdated: false
        },
        {
          name: "Sodium",
          icon: "https://cdn.modrinth.com/data/AANobbMI/icon.png",
          version: "0.4.10",
          author: "jellysquid3",
          description: "Modern rendering engine and client-side optimization mod for Minecraft",
          outdated: false
        }
      ]
    }
  },
  methods: {
    updateSort(projects, sort) {
      switch (sort) {
        case 'Version':
          return projects.slice().sort((a, b) => {
            if (a.version < b.version) {
              return -1
            }
            if (a.version > b.version) {
              return 1
            }
            return 0
          })
        case 'Author':
          return projects.slice().sort((a, b) => {
            if (a.author < b.author) {
              return -1
            }
            if (a.author > b.author) {
              return 1
            }
            return 0
          })
        default:
          return projects.slice().sort((a, b) => {
            if (a.name < b.name) {
              return -1
            }
            if (a.name > b.name) {
              return 1
            }
            return 0
        })
      }
    },
  },
  computed: {
    search() {
      const filtered = this.mods.filter((mod) => {
        return mod.name.toLowerCase().includes(this.searchFilter.toLowerCase())
      })

      return this.updateSort(filtered, this.sortFilter);
    }
  }
}
</script>
<script setup>
import { Avatar, Button, TrashIcon, PlusIcon, Card, CheckCircleIcon, SearchIcon, UpdatedIcon, DropdownSelect } from 'omorphia'
</script>

<style scoped lang="scss">
.table-container {
  display: grid;
  grid-template-rows: repeat(auto-fill, auto);
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table-row {
  display: grid;
  grid-template-columns: min-content 2fr 1fr 1fr 8rem;
}

.table-head {
  .table-cell {
    background-color: var(--color-accent-contrast);
  }
}

.table-cell {
  padding: 1rem;
  height: 100%;
  align-items: center;
  vertical-align: center;
  display: flex;
}

.table-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: fade;
}

.manage {
  display: flex;
  gap: 0.5rem;
}

.mod-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-contrast);
}

.table-row:nth-child(even) .table-cell {
  background-color: var(--color-bg);
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-raised-bg);
}

.mod-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

.text-combo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.name-cell {
  padding-left: 0;
}

.dropdown {
  width: 7rem !important;
}
</style>