cloudron-box/dashboard/src/components/app/Display.vue

<script setup>

import { ref, onMounted, useTemplateRef } from 'vue';
import { FormGroup, TextInput, Button, TagInput } from 'pankow';
import ImagePicker from '../ImagePicker.vue';
import AppsModel from '../../models/AppsModel.js';
import { API_ORIGIN } from '../../constants.js';

const props = defineProps([ 'app' ]);

const appsModel = AppsModel.create();

const imagePicker = useTemplateRef('imagePicker');
const busy = ref(false);
const labelError = ref('');
const tagsError = ref('');
const iconError = ref('');
const label = ref('');
const tags = ref([]);
const iconUrl = ref('');

function getDataURLFromFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = function(event) {
      resolve(event.target.result);
    };

    reader.onerror = function(event) {
      reject(event.target.error);
    };

    reader.readAsDataURL(file);
  });
}

async function onSubmit() {
  busy.value = true;
  labelError.value = '';
  tagsError.value = '';
  iconError.value = '';

  if (label.value !== props.app.label) {
    const [error] = await appsModel.configure(props.app.id, 'label', { label: label.value });
    if (error) {
      labelError.value = error.body ? error.body.message : 'Internal error';
      busy.value = false;
      return console.error(error);
    }
  }

  if (tags.value.join() !== props.app.tags.join()) {
    const [error] = await appsModel.configure(props.app.id, 'tags', { tags: tags.value });
    if (error) {
      tagsError.value = error.body ? error.body.message : 'Internal error';
      busy.value = false;
      return console.error(error);
    }
  }

  busy.value = false;
}

async function onIconSubmit(icon) {
  const tmp = (await getDataURLFromFile(icon)).replace(/^data:image\/[a-z]+;base64,/, '');
  const [error] = await appsModel.configure(props.app.id, 'icon', { icon: tmp });
  if (error) {
    iconError.value = error.body ? error.body.message : 'Internal error';
    return error;
  }
}

async function onIconUnset() {
  const [error] = await appsModel.configure(props.app.id, 'icon', { icon: '' });
  if (error) {
    iconError.value = error.body ? error.body.message : 'Internal error';
    return error;
  }

  iconUrl.value = props.app.iconUrl ? `${API_ORIGIN}/api/v1/apps/${props.app.id}/icon?ts=${Date.now()}` : `${API_ORIGIN}/img/appicon_fallback.png`; // calculate full icon url with cache busting
}

onMounted(() => {
  label.value = props.app.label;
  tags.value = props.app.tags;
  iconUrl.value = props.app.iconUrl;
});

</script>

<template>
  <div>
    <div style="display: inline-block;">
      <label>{{ $t('app.display.icon') }}</label>
      <ImagePicker ref="imagePicker" :src="iconUrl" fallback-src="/img/appicon_fallback.png" :save-handler="onIconSubmit" :unset-handler="onIconUnset" :size="512" display-height="128px"/>
    </div>

    <form @submit.prevent="onSubmit()" autocomplete="off">
      <fieldset :disabled="busy">
        <input type="submit" style="display: none;"/>

        <FormGroup>
          <label for="labelInput">{{ $t('app.display.label') }}</label>
          <TextInput id="labelInput" v-model="label"/>
          <div class="text-error" v-if="labelError">{{ labelError }}</div>
        </FormGroup>

        <FormGroup>
          <label for="tagsInput">{{ $t('app.display.tags') }}</label>
          <TagInput id="tagsInput" :placeholder="$t('app.display.tagsPlaceholder')" v-model="tags" v-tooltip="$t('app.display.tagsTooltip')"/>
          <div class="text-error" v-if="tagsError">{{ tagsError }}</div>
        </FormGroup>

        <Button @click="onSubmit()" :loading="busy" :disabled="busy">{{ $t('app.display.saveAction') }}</Button>
      </fieldset>
    </form>
  </div>
</template>