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

<template>
  <Dialog ref="dialogHandle" :show-x="true" @close="step = 0">
    <div class="content">
      <div class="header">
        <div class="summary">
          <div class="title">{{ manifest.title }}</div>
          <div class="lastUpdated">{{ $t('appstore.installDialog.lastUpdated', { date: prettyDate(app.creationDate) }) }}</div>
          <div class="memoryRequirement">{{ $t('appstore.installDialog.memoryRequirement', { size: prettyFileSize(manifest.memoryLimit) }) }}</div>
          <div class="author"><a :href="manifest.website" target="_blank">Website</a></div>
        </div>
        <img class="icon" :src="app.iconUrl" />
      </div>
      <Transition name="slide-left" mode="out-in">
        <div v-if="step === STEP.DETAILS">
          <Button @click="step = STEP.INSTALL" icon="fa-solid fa-circle-down">Install {{ manifest.title }}</Button>
          <div class="screenshots">
            <img class="screenshot" v-for="image in manifest.mediaLinks" :key="image" :src="image"/>
          </div>
          <div class="description" v-html="description"></div>
        </div>
        <div v-else-if="step === STEP.INSTALL">
          <div>Now install {{ manifest.title }}</div>
          <br/>
          <br/>
          <Button @click="step = STEP.DETAILS" icon="fa-solid fa-circle-down">TODO Submit</Button>
        </div>
      </Transition>
    </div>
  </Dialog>
</template>

<script setup>

import { ref, computed, useTemplateRef } from 'vue';
import { Button, Dialog } from 'pankow';
import { prettyDate, prettyFileSize } from 'pankow/utils';
import { marked } from 'marked';

const STEP = Object.freeze({
  DETAILS: Symbol('details'),
  INSTALL: Symbol('install'),
});

// reactive
const app = ref({});
const manifest = ref({});
const step = ref(STEP.DETAILS);
const dialog = useTemplateRef('dialogHandle');
const description = computed(() => marked.parse(manifest.value.description || ''));

defineExpose({
  open(a) {
    step.value = STEP.DETAILS;
    app.value = a;
    manifest.value = a.manifest;

    dialog.value.open();
  }
});

</script>

<style scoped>

.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.25s ease-out;
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.content {
  width: 1024px;
  max-width: 100%;
  height: 1024px;
  max-height: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px;
}

.summary {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.title {
  font-size: 32px;
  margin-bottom: 10px;
}

.icon {
  width: 128px;
  height: 128px;
  object-fit: contain;
  margin-right: 20px;
}

.description {
  margin: 0 4px;
}

.screenshots {
  margin: 10px 4px;
  display: flex;
  gap: 20px;
  width: 100%;
  padding: 10px 0;

  scroll-snap-type: x mandatory;
  overflow: auto;
}

.screenshot {
  display: inline-block;
  border-radius: var(--pankow-border-radius);
  height: 300px;
  object-size: contain;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

</style>