feeds-fun 0.0.4

package/src/components/TagsFilter.vue

@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <ul
+      v-if="displayedSelectedTags.length > 0"
+      style="list-style: none; padding: 0; margin: 0">
+      <tags-filter-element
+        v-for="tag of displayedSelectedTags"
+        :key="tag"
+        :tag="tag"
+        :count="tags[tag] ?? 0"
+        :selected="true"
+        @tag:selected="onTagSelected"
+        @tag:deselected="onTagDeselected" />
+    </ul>
+
+    <ul
+      v-if="displayedTags.length > 0"
+      style="list-style: none; padding: 0; margin: 0">
+      <tags-filter-element
+        v-for="tag of displayedTags"
+        :key="tag"
+        :tag="tag"
+        :count="tags[tag]"
+        :selected="false"
+        @tag:selected="onTagSelected"
+        @tag:deselected="onTagDeselected" />
+    </ul>
+
+    <hr />
+
+    <simple-pagination
+      :showFromStart="showFromStart"
+      :showPerPage="10"
+      :total="totalTags"
+      :counterOnNewLine="true"
+      v-model:showEntries="showEntries" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+
+  const selectedTags = ref<{[key: string]: boolean}>({});
+
+  const properties = defineProps<{tags: {[key: string]: number}}>();
+
+  const showFromStart = ref(25);
+
+  const showEntries = ref(showFromStart.value);
+
+  function tagComparator(a: string, b: string) {
+    const aCount = properties.tags[a];
+    const bCount = properties.tags[b];
+
+    if (aCount > bCount) {
+      return -1;
+    }
+
+    if (aCount < bCount) {
+      return 1;
+    }
+
+    if (a > b) {
+      return 1;
+    }
+
+    if (a < b) {
+      return -1;
+    }
+
+    return 0;
+  }
+
+  const displayedSelectedTags = computed(() => {
+    let values = Object.keys(selectedTags.value);
+
+    values = values.filter((tag) => {
+      return selectedTags.value[tag] === true;
+    });
+
+    values.sort(tagComparator);
+
+    return values;
+  });
+
+  const totalTags = computed(() => {
+    // TODO: this is not correct, because selected tags are treated differently
+    //       depending on their status: required or excluded.
+    //       => value is not accurate, but it is ok for now
+    return Object.keys(properties.tags).length + Object.keys(selectedTags.value).length;
+  });
+
+  const displayedTags = computed(() => {
+    let values = Object.keys(properties.tags);
+
+    if (values.length === 0) {
+      return [];
+    }
+
+    values = values.filter((tag) => {
+      return selectedTags.value[tag] !== true;
+    });
+
+    values.sort(tagComparator);
+
+    values = values.slice(0, showEntries.value);
+
+    return values;
+  });
+
+  function onTagSelected(tag: string) {
+    selectedTags.value[tag] = true;
+  }
+
+  function onTagDeselected(tag: string) {
+    selectedTags.value[tag] = false;
+  }
+</script>
+
+<style scoped>
+  .filter-element {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .filter-element value-tag {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

package/src/components/TagsFilterElement.vue

@@ -0,0 +1,89 @@
+<template>
+  <li class="filter-element">
+    <ffun-tag
+      :uid="tag"
+      :count="count"
+      :count-mode="countMode"
+      :mode="mode"
+      @tag:clicked="onTagClicked">
+      <template #start>
+        <a
+          v-if="selected"
+          href="#"
+          @click.prevent="deselect(tag)"
+          >[X]</a
+        >
+      </template>
+    </ffun-tag>
+  </li>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import {useEntriesStore} from "@/stores/entries";
+
+  const entriesStore = useEntriesStore();
+
+  const properties = defineProps<{
+    tag: string;
+    count: number;
+    selected: boolean;
+  }>();
+
+  const emit = defineEmits(["tag:selected", "tag:deselected"]);
+
+  const countMode = computed(() => {
+    if (properties.selected) {
+      return "no";
+    }
+
+    return "prefix";
+  });
+
+  const mode = computed(() => {
+    if (entriesStore.requiredTags[properties.tag]) {
+      return "required";
+    } else if (entriesStore.excludedTags[properties.tag]) {
+      return "excluded";
+    } else if (properties.selected) {
+      return "selected";
+    }
+
+    return null;
+  });
+
+  function onTagClicked(tag: string) {
+    if (entriesStore.requiredTags[properties.tag]) {
+      switchToExcluded(tag);
+    } else {
+      switchToRequired(tag);
+    }
+  }
+
+  function switchToExcluded(tag: string) {
+    entriesStore.excludeTag({tag: tag});
+    emit("tag:selected", properties.tag);
+  }
+
+  function switchToRequired(tag: string) {
+    entriesStore.requireTag({tag: tag});
+    emit("tag:selected", properties.tag);
+  }
+
+  function deselect(tag: string) {
+    entriesStore.resetTag({tag: tag});
+    emit("tag:deselected", properties.tag);
+  }
+</script>
+
+<style scoped>
+  .filter-element {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .filter-element value-tag {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

package/src/components/TagsList.vue

@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <rule-constructor
+      v-if="selectedTagsList.length > 0"
+      :tags="selectedTagsList"
+      @rule-constructor:created="onRuleCreated" />
+
+    <ffun-tag
+      v-for="tag of displayedTags"
+      :key="tag"
+      :uid="tag"
+      :mode="!!selectedTags[tag] ? 'selected' : null"
+      :count="entriesStore.reportTagsCount[tag]"
+      count-mode="tooltip"
+      @tag:clicked="onTagClicked" />
+
+    <a
+      href="#"
+      v-if="canShowAll"
+      @click.prevent="showAll = true"
+      >{{ tagsNumber - showLimit }} more</a
+    >
+
+    <a
+      href="#"
+      v-if="canHide"
+      @click.prevent="showAll = false"
+      >hide</a
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import {useEntriesStore} from "@/stores/entries";
+
+  const entriesStore = useEntriesStore();
+
+  const showAll = ref(false);
+  const showLimit = ref(5);
+
+  const selectedTags = ref<{[key: string]: boolean}>({});
+
+  const properties = defineProps<{tags: string[]}>();
+
+  const tagsNumber = computed(() => {
+    return properties.tags.length;
+  });
+
+  const displayedTags = computed(() => {
+    if (showAll.value) {
+      return preparedTags.value;
+    }
+
+    return preparedTags.value.slice(0, showLimit.value);
+  });
+
+  const preparedTags = computed(() => {
+    const values = [];
+
+    for (const tag of properties.tags) {
+      values.push(tag);
+    }
+
+    values.sort((a, b) => {
+      const aCount = entriesStore.reportTagsCount[a];
+      const bCount = entriesStore.reportTagsCount[b];
+
+      if (aCount > bCount) {
+        return -1;
+      }
+
+      if (aCount < bCount) {
+        return 1;
+      }
+
+      if (a > b) {
+        return 1;
+      }
+
+      if (a < b) {
+        return -1;
+      }
+
+      return 0;
+    });
+
+    return values;
+  });
+
+  const canShowAll = computed(() => {
+    return !showAll.value && showLimit.value < preparedTags.value.length;
+  });
+
+  const canHide = computed(() => {
+    return showAll.value && showLimit.value < preparedTags.value.length;
+  });
+
+  function onTagClicked(tag: string) {
+    if (!!selectedTags.value[tag]) {
+      delete selectedTags.value[tag];
+    } else {
+      selectedTags.value[tag] = true;
+      showAll.value = true;
+    }
+  }
+
+  const selectedTagsList = computed(() => {
+    const values = [];
+
+    for (const tag in selectedTags.value) {
+      values.push(tag);
+    }
+
+    values.sort();
+
+    return values;
+  });
+
+  function onRuleCreated() {
+    selectedTags.value = {};
+  }
+</script>
+
+<style></style>

package/src/components/UserSetting.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    v-if="setting !== null"
+    style="margin-bottom: 1rem">
+    <label>
+      <strong>{{ setting.name }}:</strong>
+      &nbsp;
+      <input
+        v-if="editing"
+        type="input"
+        v-model="value" />
+      <span v-else>{{ verboseValue }}</span>
+    </label>
+
+    &nbsp;
+
+    <template v-if="setting.type == 'boolean'">
+      <button
+        v-if="!setting.value"
+        @click.prevent="turnOn()"
+        >Turn on</button
+      >
+
+      <button
+        v-if="setting.value"
+        @click.prevent="turnOff()"
+        >Turn off</button
+      >
+    </template>
+
+    <template v-else-if="!editing">
+      <button @click.prevent="startEditing()">Edit</button>
+    </template>
+
+    <template v-else>
+      <button @click.prevent="save()">Save</button>
+      &nbsp;
+      <button @click.prevent="cancel()">Cancel</button>
+    </template>
+
+    <div
+      v-if="setting.description"
+      v-html="setting.description" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref, onUnmounted, watch} from "vue";
+  import {computedAsync} from "@vueuse/core";
+  import * as api from "@/logic/api";
+  import * as t from "@/logic/types";
+  import * as e from "@/logic/enums";
+  import {useGlobalSettingsStore} from "@/stores/globalSettings";
+
+  const globalSettings = useGlobalSettingsStore();
+
+  const properties = defineProps<{kind: string}>();
+
+  const value = ref<string | boolean | number | null>(null);
+
+  const editing = ref(false);
+
+  const setting = computed(() => {
+    if (properties.kind === null) {
+      return null;
+    }
+
+    if (globalSettings.userSettings === null) {
+      return null;
+    }
+
+    return globalSettings.userSettings[properties.kind];
+  });
+
+  const verboseValue = computed(() => {
+    if (setting.value === null) {
+      return "—";
+    }
+
+    const v = setting.value.value;
+    const type = setting.value.type;
+
+    if (type == "boolean") {
+      return v ? "Yes" : "No";
+    }
+
+    if (v == null || v == "") {
+      return "—";
+    }
+
+    if (type == "secret") {
+      return "********";
+    }
+
+    return v;
+  });
+
+  async function save() {
+    if (value.value === null) {
+      return;
+    }
+
+    await api.setUserSetting({kind: properties.kind, value: value.value});
+    globalSettings.updateDataVersion();
+    editing.value = false;
+  }
+
+  function cancel() {
+    value.value = setting.value && setting.value.value;
+    editing.value = false;
+  }
+
+  function startEditing() {
+    value.value = setting.value && setting.value.value;
+    editing.value = true;
+  }
+
+  async function turnOn() {
+    value.value = true;
+    await save();
+  }
+
+  async function turnOff() {
+    value.value = false;
+    await save();
+  }
+</script>
+
+<style></style>

package/src/inputs/Marker.vue

@@ -0,0 +1,70 @@
+<template>
+  <div style="display: inline-block">
+    <template v-if="hasMarker">
+      <a
+        href="#"
+        class="marked"
+        @click.prevent="unmark()"
+        >{{ onText }}</a
+      >
+    </template>
+
+    <template v-else>
+      <a
+        href="#"
+        class="unmarked"
+        @click.prevent="mark()"
+        >{{ offText }}</a
+      >
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import * as api from "@/logic/api";
+  import type * as e from "@/logic/enums";
+  import type * as t from "@/logic/types";
+  import {useEntriesStore} from "@/stores/entries";
+
+  const entriesStore = useEntriesStore();
+
+  const properties = defineProps<{
+    marker: e.Marker;
+    entryId: t.EntryId;
+    onText: string;
+    offText: string;
+  }>();
+
+  const hasMarker = computed(() => {
+    return entriesStore.entries[properties.entryId].hasMarker(properties.marker);
+  });
+
+  async function mark() {
+    await entriesStore.setMarker({
+      entryId: properties.entryId,
+      marker: properties.marker
+    });
+  }
+
+  async function unmark() {
+    await entriesStore.removeMarker({
+      entryId: properties.entryId,
+      marker: properties.marker
+    });
+  }
+</script>
+
+<style scoped>
+  .marked {
+    color: #2e8f2e;
+    font-weight: bold;
+    text-decoration: none;
+  }
+
+  .unmarked {
+    color: purple;
+    /* font-weight: bold; */
+    text-decoration: none;
+  }
+</style>

package/src/inputs/ScoreSelector.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <select
+      :value="modelValue"
+      @input="updateSelected">
+      <option
+        v-for="score of scores"
+        :value="score"
+        :selected="modelValue === score">
+        {{ score }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import {computed, ref} from "vue";
+  import * as api from "@/logic/api";
+
+  const properties = withDefaults(defineProps<{scores?: number[]; modelValue: number}>(), {
+    scores: () => [
+      1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, -1, -2, -3, -5, -8, -13, -21, -34, -55, -89, -144, -233,
+      -377, -610
+    ],
+    modelValue: 1
+  });
+
+  const emit = defineEmits(["update:modelValue"]);
+
+  function updateSelected(event: Event) {
+    const target = event.target as HTMLSelectElement;
+
+    const newScore = Number(target.value);
+    emit("update:modelValue", newScore);
+  }
+</script>
+
+<style scoped></style>