@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/components/Edit/Features/Publish/Dialog/index.vue

@@ -1,116 +1,329 @@
 <template>
   <DialogModal
     :title="$t('publishDialogTitle', 'Publish changes')"
-    :width="1200"
+    :width="900"
     :submit-label
     :is-loading="isLoading"
-    :can-submit="!!selectedToPublishItems.length"
+    :can-submit="canSubmit"
     class="bk-is-publish-dialog"
     @submit="onSubmit"
     @cancel="$emit('close')"
   >
     <div class="bk bk-form bk-dialog-publish-form">
-      <FormGroup title="Einstellungen" horizontal>
-        <FormItem v-if="publishOptions?.hasRevisionLogMessage">
-          <FormTextarea
-            v-model="revisionMessage"
-            label="Protokollnachricht der Revision"
-            description="Beschreiben Sie kurz die vorgenommenen Änderungen"
-            :disabled="isLoading"
+      <FormItem>
+        <div class="bk-form-label">
+          {{ $t("publishMode", "Publish mode")
+          }}<span class="bk-required-indicator">*</span>
+        </div>
+        <div class="bk-publish-options">
+          <PublishOption
+            v-for="option in publishModeOptions"
+            :id="option.id"
+            :key="option.id"
+            v-model="publishMode"
+            :icon="option.icon"
+            :color="option.color"
+            :label="option.label"
+            :description="option.description"
+            :disabled="option.disabled"
           />
-        </FormItem>
-        <FormItem>
-          <FormToggle
-            v-model="shouldPublish"
-            :label="toggleLabel"
-            :disabled="isLoading"
+        </div>
+      </FormItem>
+
+      <FormItem v-if="publishMode === 'scheduled'">
+        <div>
+          <label class="bk-form-label">
+            {{ $t("publishScheduleDate", "Publication date") }}
+          </label>
+          <div class="bk-publish-schedule-date-wrapper">
+            <div v-if="isAlreadyScheduled" class="bk-publish-scheduled-display">
+              {{ formatScheduleDate(scheduleDate) }}
+            </div>
+            <ScheduleDate
+              v-else
+              v-model="scheduleDate"
+              :disabled="isLoading"
+              :error="scheduleDateError"
+            >
+              <div
+                class="bk-schedule-date-info"
+                v-text="
+  $t(
+    'publishScheduledInfo',
+    'You can still make changes until the scheduled publication date.'
+  )
+"
+              />
+            </ScheduleDate>
+            <button
+              v-if="isAlreadyScheduled"
+              type="button"
+              class="bk-button bk-is-danger"
+              @click="removeScheduledDate"
+            >
+              {{ $t("publishRemoveSchedule", "Remove schedule") }}
+            </button>
+          </div>
+          <div v-if="isAlreadyScheduled" class="bk-form-description">
+            {{
+              $t(
+  "publishAlreadyScheduledDescription",
+  "This page is already scheduled for publishing"
+)
+            }}
+          </div>
+        </div>
+      </FormItem>
+
+      <FormItem v-if="publishOptions?.hasRevisionLogMessage">
+        <FormTextarea
+          id="revision-message"
+          v-model="revisionMessage"
+          :label="$t('publishRevisionLogMessage', 'Change description')"
+          :description="
+  $t(
+    'publishRevisionLogMessageDescription',
+    'Briefly describe the changes made'
+  )
+"
+          :disabled="isLoading || isAlreadyScheduled"
+          rows="2"
+        />
+      </FormItem>
+
+      <FormItem v-if="publishMode !== 'save' && scheduledBlocks.length">
+        <InfoBox>
+          <p
+            v-for="(text, index) in scheduledBlocks"
+            :key="'infobox' + index"
+            v-html="text"
           />
-        </FormItem>
-      </FormGroup>
+        </InfoBox>
+      </FormItem>
 
-      <FormGroup title="Inhalte" horizontal>
-        <FormItem>
-          <template v-if="successItems.length">
-            <h2 class="bk-heading-2">Erfolgreich veröffentlicht</h2>
+      <FormItem v-if="successItems.length && showTable">
+        <h2 class="bk-heading-2">
+          {{ $t("publishSuccessfullyPublished", "Successfully published") }}
+        </h2>
 
-            <table class="bk-table bk-publish-dialog-table">
-              <thead>
-                <tr>
-                  <th>Name</th>
-                  <th colspan="2">Status</th>
-                </tr>
-              </thead>
+        <table class="bk-table bk-publish-dialog-table">
+          <thead>
+            <tr>
+              <th>{{ $t("publishName", "Name") }}</th>
+              <th colspan="2">{{ $t("publishStatus", "Status") }}</th>
+            </tr>
+          </thead>
 
-              <tbody>
-                <Item
-                  v-for="item in successItems"
-                  :key="'success' + item.id"
-                  v-bind="item"
-                  v-model="states"
-                  :is-current="item.id === currentId"
-                  :should-publish
-                  :is-mutating
-                  :mutation-status="mutationStatusItems[item.id]"
-                />
-              </tbody>
-            </table>
-          </template>
+          <tbody>
+            <Item
+              v-for="item in successItems"
+              :key="'success' + item.id"
+              v-bind="item"
+              v-model="states"
+              :is-current="item.id === currentId"
+              :should-publish
+              :is-mutating
+              :mutation-status="mutationStatusItems[item.id]"
+              :is-scheduled="enableScheduling"
+              :schedule-date
+            />
+          </tbody>
+        </table>
 
-          <table class="bk-table bk-publish-dialog-table">
-            <thead>
-              <tr>
-                <th>Name</th>
-                <th colspan="2">Status</th>
-              </tr>
-            </thead>
+        <table class="bk-table bk-publish-dialog-table">
+          <thead>
+            <tr>
+              <th>{{ $t("publishName", "Name") }}</th>
+              <th colspan="2">{{ $t("publishStatus", "Status") }}</th>
+            </tr>
+          </thead>
 
-            <tbody>
-              <Item
-                v-for="item in toPublishItems"
-                :key="'to_publish_' + item.id"
-                v-bind="item"
-                v-model="states"
-                :is-current="item.id === currentId"
-                :should-publish
-                :is-mutating
-                :mutation-status="mutationStatusItems[item.id]"
-              />
-            </tbody>
-          </table>
-        </FormItem>
-      </FormGroup>
+          <tbody>
+            <Item
+              v-for="item in toPublishItems"
+              :key="'to_publish_' + item.id"
+              v-bind="item"
+              v-model="states"
+              :is-current="item.id === currentId"
+              :should-publish
+              :is-mutating
+              :mutation-status="mutationStatusItems[item.id]"
+              :is-scheduled="enableScheduling"
+              :schedule-date
+            />
+          </tbody>
+        </table>
+      </FormItem>
     </div>
+    <template #pre-footer>
+      <div>
+        <h3 class="bk-form-label">
+          {{ $t("publishSummary", "Summary") }}
+        </h3>
+        <Summary
+          :is-published="isCurrentlyPublished"
+          :mode="publishMode"
+          :current-state-label="currentStateLabel"
+          :action-label="actionLabel"
+          :result-state-label="resultStateLabel"
+        />
+      </div>
+    </template>
   </DialogModal>
 </template>
 
 <script setup>
-import { ref, computed, useBlokkli, useAsyncData } from "#imports";
+import {
+  ref,
+  computed,
+  watch,
+  useBlokkli,
+  useAsyncData,
+  onMounted,
+  onUnmounted
+} from "#imports";
 import {
   DialogModal,
-  FormToggle,
   FormTextarea,
   FormItem,
-  FormGroup
+  ScheduleDate,
+  InfoBox
 } from "#blokkli/components";
-import { falsy } from "#blokkli/helpers";
+import { emitMessage } from "#blokkli/helpers/eventBus";
 import Item from "./Item.vue";
-const { adapter, $t, state, context } = useBlokkli();
+import PublishOption, {} from "./PublishOption.vue";
+import Summary from "./Summary.vue";
+const showTable = false;
+const { adapter, $t, state, context, ui } = useBlokkli();
+const formatScheduleDate = (date) => {
+  return ui.formatDate(date, {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  });
+};
 const isMutating = ref(false);
 const mutationStatusItems = ref({});
 const publishedIds = ref([]);
-const shouldPublish = defineModel("shouldPublish", { type: Boolean, ...{
-  default: () => false
-} });
-const states = defineModel("states", { type: Array, ...{
-  default: () => []
-} });
-const revisionMessage = defineModel("revisionMessage", { type: String, ...{
-  default: () => false
-} });
+const states = ref([]);
+const revisionMessage = ref("");
+const currentTimestamp = ref(Date.now());
+let timestampInterval = null;
+onMounted(() => {
+  timestampInterval = setInterval(() => {
+    currentTimestamp.value = Date.now();
+  }, 3e4);
+});
+onUnmounted(() => {
+  if (timestampInterval) {
+    clearInterval(timestampInterval);
+  }
+});
+const publishMode = ref("immediate");
 const emit = defineEmits(["close", "submit"]);
-const { data: publishOptions, status } = await useAsyncData(() => {
+const {
+  data: publishOptions,
+  status,
+  refresh
+} = await useAsyncData(() => {
   return adapter.getPublishOptions();
 });
+const scheduledBlocks = computed(() => {
+  const referenceTimestamp = publishMode.value === "scheduled" && scheduleDate.value ? new Date(scheduleDate.value).getTime() : currentTimestamp.value;
+  const grouped = state.getAllUuids().reduce((acc, uuid) => {
+    const item = state.getFieldListItem(uuid);
+    if (!item?.editContext?.publishOn) {
+      return acc;
+    }
+    const publishDate = new Date(item.editContext.publishOn).getTime();
+    if (publishDate <= referenceTimestamp) {
+      return acc;
+    }
+    const dateKey = item.editContext.publishOn;
+    acc[dateKey] = (acc[dateKey] || 0) + 1;
+    return acc;
+  }, {});
+  return Object.entries(grouped).map(([date, count]) => {
+    const formattedDate = formatScheduleDate(date);
+    const message = count === 1 ? $t(
+      "publishScheduledBlockSingular",
+      "1 block is scheduled to be published on @date"
+    ) : $t(
+      "publishScheduledBlockPlural",
+      "@count blocks are scheduled to be published on @date"
+    );
+    return message.replace("@count", count.toString()).replace("@date", `<strong>${formattedDate}</strong>`);
+  });
+});
+const canSchedule = computed(() => !!publishOptions.value?.canSchedule);
+const publishOn = computed(
+  () => publishOptions.value?.publishOn ?? null
+);
+const isAlreadyScheduled = computed(() => !!publishOn.value);
+const isCurrentlyPublished = computed(() => !!state.entity.value?.status);
+const publishModeOptions = computed(() => {
+  const options = [
+    {
+      id: "save",
+      icon: "save",
+      color: "red",
+      label: $t("publishModeSaveTitle", "Save"),
+      description: $t(
+        "publishModeSaveDescription",
+        "Save changes without publishing"
+      ),
+      disabled: isCurrentlyPublished.value || isAlreadyScheduled.value
+    },
+    {
+      id: "immediate",
+      icon: "publish",
+      color: "lime",
+      label: $t("publishModeImmediateTitle", "Publish"),
+      description: $t(
+        "publishModeImmediateDescription",
+        "Publish changes immediately"
+      ),
+      disabled: isAlreadyScheduled.value
+    }
+  ];
+  if (canSchedule.value) {
+    options.push({
+      id: "scheduled",
+      icon: "calendar-clock",
+      color: "yellow",
+      label: $t("publishModeScheduledTitle", "Schedule"),
+      description: $t(
+        "publishModeScheduledDescription",
+        "Schedule changes for publishing"
+      ),
+      disabled: false
+    });
+  }
+  return options;
+});
+const scheduleDate = ref(publishOn.value || "");
+if (publishOptions.value?.revisionLogMessage) {
+  revisionMessage.value = publishOptions.value.revisionLogMessage;
+}
+if (!isCurrentlyPublished.value) {
+  publishMode.value = "save";
+}
+if (publishOn.value) {
+  publishMode.value = "scheduled";
+}
+watch(publishMode, (newMode) => {
+  if (newMode === "scheduled" && !scheduleDate.value) {
+    const tomorrow = /* @__PURE__ */ new Date();
+    tomorrow.setDate(tomorrow.getDate() + 1);
+    tomorrow.setHours(12, 0, 0, 0);
+    scheduleDate.value = tomorrow.toISOString();
+  }
+});
+const enableScheduling = computed(() => publishMode.value === "scheduled");
+const shouldPublish = computed(() => publishMode.value !== "save");
 const { data: editStates } = await useAsyncData(
   () => {
     if (adapter.getEditStates) {
@@ -166,39 +379,133 @@ const selectedToPublishItems = computed(
   )
 );
 const isLoading = computed(() => status.value === "pending" || isMutating.value);
-const submitLabelPublish = computed(() => {
-  if (shouldPublish.value) {
-    const count = 1 + states.value.length;
-    return "@count Inhalte publizieren".replace("@count", count.toString());
+const scheduleDateError = computed(() => {
+  if (publishMode.value !== "scheduled" || !scheduleDate.value) {
+    return "";
+  }
+  const selectedDateTime = new Date(scheduleDate.value);
+  const minDateTime = new Date(currentTimestamp.value + 2 * 60 * 1e3);
+  if (selectedDateTime < minDateTime) {
+    return $t(
+      "publishScheduleDateTooSoon",
+      "The scheduled date must be at least 2 minutes in the future"
+    );
   }
-  return null;
+  return "";
 });
-const submitLabelSave = computed(() => {
+const canSubmit = computed(() => {
+  if (!selectedToPublishItems.value.length) {
+    return false;
+  }
+  if (publishMode.value === "scheduled" && !scheduleDate.value) {
+    return false;
+  }
+  if (publishMode.value === "scheduled" && isAlreadyScheduled.value) {
+    return false;
+  }
+  if (scheduleDateError.value) {
+    return false;
+  }
+  return true;
+});
+const submitLabel = computed(() => {
   const count = selectedToPublishItems.value.length;
-  if (!count) {
-    if (shouldPublish.value) {
-      return "Inhalte publizieren";
+  if (publishMode.value === "scheduled") {
+    if (count === 0) {
+      return $t("publishSchedulePublication", "Schedule publication");
+    }
+    return count === 1 ? $t("publishSchedulePublication", "Schedule publication") : $t(
+      "publishSchedulePublications",
+      "Schedule @count publications"
+    ).replace("@count", count.toString());
+  }
+  if (publishMode.value === "save") {
+    if (count === 0) {
+      return $t("publishSaveContent", "Save content");
     }
-    return "Inhalte speichern";
+    return count === 1 ? $t("publishSaveContent", "Save content") : $t("publishSaveContents", "Save @count contents").replace(
+      "@count",
+      count.toString()
+    );
   }
-  if (!shouldPublish.value) {
-    return "@count Inhalte speichern".replace("@count", count.toString());
+  if (count === 0) {
+    return $t("publishPublishContent", "Publish content");
   }
-  return null;
+  return count === 1 ? $t("publishPublishContent", "Publish content") : $t("publishPublishContents", "Publish @count contents").replace(
+    "@count",
+    count.toString()
+  );
 });
-const submitLabel = computed(() => {
-  return [submitLabelPublish.value, submitLabelSave.value].filter(falsy).join(", ");
+const currentStateLabel = computed(
+  () => isCurrentlyPublished.value ? $t("publishCurrentlyPublished", "Page is published") : $t("publishCurrentlyUnpublished", "Page is unpublished")
+);
+const actionLabel = computed(() => {
+  if (publishMode.value === "save") {
+    return $t("publishModeSaveTitle", "Save");
+  }
+  if (publishMode.value === "scheduled") {
+    return $t("publishModeScheduledTitle", "Schedule");
+  }
+  return $t("publishModeImmediateTitle", "Publish");
 });
-const toggleLabel = computed(() => {
-  if (states.value.length) {
-    return "Inhalte publizieren";
+const resultStateLabel = computed(() => {
+  if (publishMode.value === "save") {
+    return $t(
+      "publishResultSaveChanges",
+      "Changes are saved, page remains unpublished"
+    );
+  }
+  if (publishMode.value === "scheduled" && scheduleDate.value) {
+    const formattedDate = formatScheduleDate(scheduleDate.value);
+    if (isCurrentlyPublished.value) {
+      return $t(
+        "publishResultScheduledChanges",
+        "Changes will be published on @date"
+      ).replace("@date", formattedDate);
+    }
+    return $t(
+      "publishResultScheduledPage",
+      "Page will be published on @date"
+    ).replace("@date", formattedDate);
   }
-  return "Inhalt publizieren";
+  if (isCurrentlyPublished.value) {
+    return $t(
+      "publishResultPublishChangesRemainPublished",
+      "Changes are published, page remains published"
+    );
+  }
+  return $t(
+    "publishResultPublishChangesNowPublished",
+    "Changes are published, page is now published"
+  );
 });
+async function removeScheduledDate() {
+  if (!adapter.unscheduleEditState) {
+    return;
+  }
+  isMutating.value = true;
+  const previousScheduleDate = scheduleDate.value;
+  const success = await state.mutateWithLoadingState(
+    () => adapter.unscheduleEditState({
+      hostEntityType: context.value.entityType,
+      hostEntityUuid: context.value.entityUuid
+    })
+  );
+  if (success) {
+    await refresh();
+    scheduleDate.value = previousScheduleDate;
+  }
+  isMutating.value = false;
+}
 async function onSubmit() {
+  currentTimestamp.value = Date.now();
+  if (scheduleDateError.value) {
+    return;
+  }
   isMutating.value = true;
   const items = stateItems.value;
-  let hasAnyError = false;
+  const hasAnyError = false;
+  let mutationResult = false;
   for (const item of items) {
     const isSelected = states.value.includes(item.id) || item.hostEntityType === context.value.entityType && item.hostEntityUuid === context.value.entityUuid;
     if (!isSelected) {
@@ -208,30 +515,29 @@ async function onSubmit() {
       continue;
     }
     try {
-      const result = await adapter.publish({
-        hostEntityType: item.hostEntityType,
-        hostEntityUuid: item.hostEntityUuid,
-        closeAfterPublish: true,
-        revisionLogMessage: revisionMessage.value,
-        publishIfUnpublished: shouldPublish.value
-      });
-      let violations = [];
-      if (!result.success && result.state) {
-        const mapped = adapter.mapState(result.state);
-        if (mapped.mutatedState?.violations) {
-          violations = mapped.mutatedState.violations;
+      if (publishMode.value === "scheduled") {
+        if (!adapter.scheduleEditState) {
+          throw new Error("scheduleEditState method not available");
         }
+        mutationResult = await state.mutateWithLoadingState(
+          () => adapter.scheduleEditState({
+            hostEntityType: item.hostEntityType,
+            hostEntityUuid: item.hostEntityUuid,
+            revisionLogMessage: revisionMessage.value,
+            date: scheduleDate.value
+          })
+        );
+      } else {
+        mutationResult = await state.mutateWithLoadingState(
+          () => adapter.publish({
+            hostEntityType: item.hostEntityType,
+            hostEntityUuid: item.hostEntityUuid,
+            closeAfterPublish: true,
+            revisionLogMessage: revisionMessage.value,
+            publishIfUnpublished: shouldPublish.value
+          })
+        );
       }
-      mutationStatusItems.value[item.id] = {
-        id: item.id,
-        success: result.success,
-        errors: result.errors,
-        violations
-      };
-      if (result.success) {
-        publishedIds.value.push(item.id);
-      }
-      hasAnyError ||= !result.success;
     } catch {
       mutationStatusItems.value[item.id] = {
         id: item.id,
@@ -243,9 +549,19 @@ async function onSubmit() {
     }
   }
   isMutating.value = false;
-  if (hasAnyError) {
+  if (hasAnyError || !mutationResult) {
     return;
   }
-  emit("submit");
+  if (publishMode.value === "scheduled") {
+    const formattedDate = formatScheduleDate(scheduleDate.value);
+    const message = $t(
+      "publishScheduleSuccess",
+      "Publication scheduled for @date"
+    ).replace("@date", formattedDate);
+    emitMessage(message, "success");
+    emit("close");
+  } else {
+    emit("submit");
+  }
 }
 </script>

package/dist/runtime/components/Edit/Features/Publish/Dialog/index.vue.d.ts

@@ -1,19 +1,8 @@
-type __VLS_PublicProps = {
-    'shouldPublish'?: boolean;
-    'states'?: string[];
-    'revisionMessage'?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => void;
     submit: () => void;
-    "update:shouldPublish": (value: boolean) => void;
-    "update:states": (value: string[]) => void;
-    "update:revisionMessage": (value: string) => void;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
     onClose?: (() => any) | undefined;
     onSubmit?: (() => any) | undefined;
-    "onUpdate:shouldPublish"?: ((value: boolean) => any) | undefined;
-    "onUpdate:states"?: ((value: string[]) => any) | undefined;
-    "onUpdate:revisionMessage"?: ((value: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;