Submit to Community Library panel

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/Box.vue

@@ -0,0 +1,130 @@
+<template>
+
+  <div class="box">
+    <KTransition kind="component-fade-out-in">
+      <div
+        v-if="loading"
+        key="box-loader-wrapper"
+        class="loader-wrapper"
+      >
+        <KCircularLoader disableDefaultTransition />
+      </div>
+      <div
+        v-else
+        key="box-content"
+        class="box-content"
+      >
+        <div class="box-icon">
+          <KIcon :icon="icon" />
+        </div>
+        <slot></slot>
+        <div
+          v-if="$slots.chip"
+          class="chip"
+        >
+          <slot name="chip"></slot>
+        </div>
+      </div>
+    </KTransition>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { computed } from 'vue';
+  import { themePalette, themeTokens } from 'kolibri-design-system/lib/styles/theme';
+
+  export default {
+    name: 'Box',
+    setup(props) {
+      const paletteTheme = themePalette();
+      const tokensTheme = themeTokens();
+
+      const boxBackgroundColor = computed(() => {
+        switch (props.kind) {
+          case 'warning':
+            return paletteTheme.yellow.v_100;
+          case 'info':
+            return paletteTheme.grey.v_100;
+          default:
+            throw new Error(`Unsupported box kind: ${props.kind}`);
+        }
+      });
+      const boxTextColor = computed(() => {
+        switch (props.kind) {
+          case 'warning':
+            return paletteTheme.red.v_500;
+          case 'info':
+            return tokensTheme.text;
+          default:
+            throw new Error(`Unsupported box kind: ${props.kind}`);
+        }
+      });
+      const icon = computed(() => {
+        switch (props.kind) {
+          case 'warning':
+            return 'warningIncomplete';
+          case 'info':
+            return 'infoOutline';
+          default:
+            throw new Error(`Unsupported box kind: ${props.kind}`);
+        }
+      });
+
+      return {
+        boxBackgroundColor,
+        boxTextColor,
+        icon,
+      };
+    },
+    props: {
+      kind: {
+        type: String,
+        required: false,
+        default: 'info',
+        validator: value => ['warning', 'info'].includes(value),
+      },
+      loading: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .box {
+    padding: 8px;
+    color: v-bind('boxTextColor');
+    background-color: v-bind('boxBackgroundColor');
+    border-radius: 4px;
+  }
+
+  .box-content {
+    display: flex;
+    gap: 8px;
+  }
+
+  .box-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .chip {
+    margin-left: auto;
+  }
+
+  .loader-wrapper {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+  }
+
+</style>

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/LoadingText.vue

@@ -0,0 +1,67 @@
+<template>
+
+  <div v-if="!omitted">
+    <div
+      v-if="loading"
+      class="loader-wrapper"
+    >
+      <KCircularLoader :size="16" />
+      {{ $tr('checking') }}
+    </div>
+    <div v-else-if="finishedLoading">
+      <slot></slot>
+    </div>
+    <div v-else>{{ $tr('error') }}</div>
+  </div>
+  <div v-else><KEmptyPlaceholder /></div>
+
+</template>
+
+
+<script setup>
+
+  defineProps({
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+    finishedLoading: {
+      type: Boolean,
+      required: true,
+    },
+    omitted: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  });
+
+</script>
+
+
+<script>
+
+  export default {
+    $trs: {
+      checking: 'Checking...',
+      error: 'Error loading data.',
+    },
+  };
+
+</script>
+
+
+<style scoped lang="scss">
+
+  .loader-wrapper {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+
+  .loader-wrapper ::v-deep .ui-progress-circular {
+    display: inline-block;
+    margin: 0;
+  }
+
+</style>

contentcuration/contentcuration/frontend/channelEdit/components/sidePanels/SubmitToCommunityLibrarySidePanel/StatusChip.vue

@@ -0,0 +1,103 @@
+<template>
+
+  <div class="status-chip">
+    <KIcon
+      :icon="icon"
+      :color="labelColor"
+      class="status-icon"
+    />
+    {{ text }}
+  </div>
+
+</template>
+
+
+<script>
+
+  import { themePalette } from 'kolibri-design-system/lib/styles/theme';
+  import { computed } from 'vue';
+  import { communityChannelsStrings } from 'shared/strings/communityChannelsStrings';
+  import { CommunityLibraryStatus } from 'shared/constants';
+
+  export default {
+    name: 'StatusChip',
+    setup(props) {
+      const theme = themePalette();
+
+      const { pendingStatus$, approvedStatus$, flaggedStatus$ } = communityChannelsStrings;
+
+      const configChoices = {
+        [CommunityLibraryStatus.PENDING]: {
+          text: pendingStatus$(),
+          color: theme.yellow.v_100,
+          labelColor: theme.orange.v_600,
+          icon: 'schedule',
+        },
+        [CommunityLibraryStatus.APPROVED]: {
+          text: approvedStatus$(),
+          color: theme.green.v_100,
+          labelColor: theme.green.v_600,
+          icon: 'circleCheckmark',
+        },
+        [CommunityLibraryStatus.REJECTED]: {
+          text: flaggedStatus$(),
+          color: theme.red.v_100,
+          labelColor: theme.red.v_600,
+          icon: 'error',
+        },
+      };
+
+      const icon = computed(() => configChoices[props.status].icon);
+      const text = computed(() => configChoices[props.status].text);
+      const color = computed(() => configChoices[props.status].color);
+      const labelColor = computed(() => configChoices[props.status].labelColor);
+
+      return {
+        icon,
+        text,
+        color,
+        labelColor,
+      };
+    },
+    props: {
+      status: {
+        type: String,
+        required: true,
+        validator: value =>
+          [
+            CommunityLibraryStatus.APPROVED,
+            CommunityLibraryStatus.PENDING,
+            CommunityLibraryStatus.REJECTED,
+          ].includes(value),
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="css" scoped>
+
+  .status-chip {
+    display: flex;
+    gap: 3px;
+    align-items: center;
+    height: 20px;
+    padding-top: 2px;
+    padding-right: 5px;
+    padding-bottom: 2px;
+    padding-left: 3px;
+    font-size: 12px;
+    font-weight: 400;
+    color: v-bind('labelColor');
+    background-color: v-bind('color');
+    border-radius: 16px;
+  }
+
+  .status-icon {
+    position: static;
+    width: 18px;
+    height: 18px;
+  }
+
+</style>