rename to DockerRegistries

2025-09-10 12:00:49 +02:00
parent ba14d1e846
commit 5831bb49f1
3 changed files with 3 additions and 3 deletions
@@ -0,0 +1,106 @@
+<script setup>
+
+import { useI18n } from 'vue-i18n';
+const i18n = useI18n();
+const t = i18n.t;
+
+import { ref, onMounted, useTemplateRef, inject } from 'vue';
+import { Button, Menu, TableView, InputDialog } from '@cloudron/pankow';
+import Section from '../components/Section.vue';
+import DockerRegistryDialog from '../components/DockerRegistryDialog.vue';
+import DockerRegistriesModel from '../models/DockerRegistriesModel.js';
+
+const dockerRegistriesModel = DockerRegistriesModel.create();
+
+const registries = ref([]);
+
+const columns = {
+  serverAddress: {
+    label: t('settings.privateDockerRegistry.server'),
+    sort: true
+  },
+  username: {
+    label: t('settings.privateDockerRegistry.username'),
+    sort: true
+  },
+  actions: {}
+};
+
+const actionMenuModel = ref([]);
+const actionMenuElement = useTemplateRef('actionMenuElement');
+function onActionMenu(registry, event) {
+  actionMenuModel.value = [{
+    icon: 'fa-solid fa-pencil-alt',
+    label: t('main.action.edit'),
+    action: onEditOrAdd.bind(null, registry),
+  }, {
+    separator: true,
+  }, {
+    icon: 'fa-solid fa-trash-alt',
+    label: t('main.action.remove'),
+    action: onRemove.bind(null, registry),
+  }];
+
+  actionMenuElement.value.open(event, event.currentTarget);
+}
+
+const features = inject('features');
+const subscriptionRequiredDialog = inject('subscriptionRequiredDialog');
+
+const dialog = useTemplateRef('dialog');
+const inputDialog = useTemplateRef('inputDialog');
+
+function onEditOrAdd(registry = null) {
+  if (registry || features.value.privateDockerRegistry) dialog.value.open(registry);
+  else subscriptionRequiredDialog.value.open();
+}
+
+async function onRemove(registry) {
+  const yes = await inputDialog.value.confirm({
+    message: t('settings.privateDockerRegistry.deleteQuestion'),
+    confirmStyle: 'danger',
+    confirmLabel: t('main.dialog.delete'),
+    rejectLabel: t('main.dialog.cancel')
+  });
+
+  if (!yes) return;
+
+  const [error] = await dockerRegistriesModel.remove(registry.id);
+  if (error) console.error(error);
+
+  await refresh();
+}
+async function refresh() {
+  const [error, result] = await dockerRegistriesModel.list();
+  if (error) return console.error(error);
+
+  registries.value = result;
+}
+
+onMounted(async () => {
+  await refresh();
+});
+
+</script>
+
+<template>
+  <Section :title="$t('settings.privateDockerRegistry.title')" :title-badge="features.privateDockerRegistry ? 'Upgrade' : ''">
+    <Menu ref="actionMenuElement" :model="actionMenuModel" />
+    <InputDialog ref="inputDialog" />
+    <DockerRegistryDialog ref="dialog" @success="refresh()"/>
+
+    <template #header-buttons>
+      <Button icon="fa-solid fa-plus" @click="onEditOrAdd()">{{ $t('main.action.add') }}</Button>
+    </template>
+
+    <p v-html="$t('settings.privateDockerRegistry.description', { customAppsLink: 'https://docs.cloudron.io/custom-apps/tutorial/' })"></p>
+
+    <TableView :columns="columns" :model="registries">
+      <template #actions="registry">
+        <div style="text-align: right;">
+          <Button tool plain secondary @click.capture="onActionMenu(registry, $event)" icon="fa-solid fa-ellipsis" />
+        </div>
+      </template>
+    </TableView>
+  </Section>
+</template>