cloudron-box/dashboard/src/components/AppstoreView.vue

<template>
  <div class="content">
    <AppInstallDialog ref="appInstallDialog" />

    <div class="filter-bar">
      <TextInput ref="searchInput" v-model="search" :placeholder="$t('appstore.searchPlaceholder')" style="max-width: 100%; width: 500px;"/>
    </div>

    <TransitionGroup name="grid-animation" tag="div" class="grid">
      <div class="item" v-for="app in filteredApps" :key="app.id" :ref="'item-' + app.id" @click="onInstall(app)">
        <img class="icon" :src="app.iconUrl" />
        <div class="description">
          <div class="title">{{ app.manifest.title }}</div>
          <div class="tagline">{{ app.manifest.tagline }}</div>
        </div>
      </div>
    </TransitionGroup>
  </div>
</template>

<script>

import { TextInput } from 'pankow';

import AppstoreModel from '../models/AppstoreModel.js';
import AppInstallDialog from './AppInstallDialog.vue';

const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
const accessToken = localStorage.token;

const appstoreModel = AppstoreModel.create(API_ORIGIN, accessToken);

export default {
  name: 'AppstoreView',
  components: {
    AppInstallDialog,
    TextInput,
  },
  data() {
    return {
      API_ORIGIN,
      ready: false,
      apps: [],
      search: '',
      activeApp: {
        manifest: {}
      },
    };
  },
  computed: {
    filteredApps() {
      if (!this.search) return this.apps;

      const search = this.search.toLowerCase();

      return this.apps.filter(a => {
        if (a.manifest.title.toLowerCase().indexOf(search) !== -1) return true;
        if (a.manifest.tagline.toLowerCase().indexOf(search) !== -1) return true;
        if (a.manifest.tags.join().toLowerCase().indexOf(search) !== -1) return true;
        return false;
      });
    }
  },
  methods: {
    onInstall(app) {
      this.$refs.appInstallDialog.open(app);
    },
  },
  async mounted() {
    this.apps = await appstoreModel.list();

    this.ready = true;

    setTimeout(() => this.$refs.searchInput.$el.focus(), 0);
  }
};

</script>

<style scoped>

.grid-animation-move,
.grid-animation-enter-active,
.grid-animation-leave-active {
  transition: all 0.2s ease;
}

.grid-animation-enter-from {
  opacity: 0;
  transform: scale(0);
}

.grid-animation-leave-to {
  opacity: 0;
  transform: scale(0);
}

.content {
  position: relative;
  width: 100%;
}

.filter-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.grid {
  position: relative;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.item {
  display: flex;
  align-items: center;
  width: 300px;
  padding: 10px 15px;
  border-radius: 10px;
  cursor: pointer;
}

.item:hover {
  background-color: var(--card-background);
}

.item.active {
  width: 100%;
  background-color: var(--card-background);
}

.icon {
  width: 64px;
  height: 64px;
  object-fit: cover;
  margin-right: 20px;
}

.title {
  font-size: 16px;
}

.tagline {
  font-size: 12px;
  opacity: 0.8;
}

</style>