AdminList.vue

AdminList.vue

<template lang="pug">
  span
    .contentArea--manager.contentArea--managerList.manager__scopeContainer
      .use-case__wrapper--outer.flex.flex-row
        //- this was and shall be again dynamic
        .use-case-filters.flex.flex-column
          header.admin__header--topMost
            .admin__headline--page Success Stories
          .category-filter
            fieldset.fieldset--filters
              h4.headline--forRadOrCheckGroup Filter by Category
              span.flex.flex-column.radioOrCheckbox__wrapper
                label.label--forRadioOrCheckbox.filters__label.flex.flex-row(
                  v-for="(category, index) in c"
                  )
                  input.filters__input.input--checkbox.hidden--visually(type="checkbox" v-model="catsChecked[category.slug]")
                  span.checkbox__icon
                  span.filters__text {{ category.name }}
            footer
              p
                svg(viewBox="0 0 32 32" width="16" height="16" fill="rgb(99, 255, 252)" stroke="gray" stroke-width="2")
                  path(d="M22 13 L30 8 30 24 22 19 Z M2 8 L2 24 22 24 22 8 Z")
                small &nbsp; vid included in showcase
                  strong (pick 3)
              p
                svg(viewBox="0 0 32 32" width="16" height="16" fill="rgb(99, 255, 252)" stroke="gray" stroke-width="2")
                  path(d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z")
                small &nbsp; vid featured in showcase
                  strong (pick 1)
        .use-case__column--main.scroll.flex.flex-column.flex-grow
          .search--resultsWrapper
            .flex.flex-row.search_top
              Search(
                :class="'flex flex-grow search--successStoryListWrapper'"
                :handler="filterResults"
                :searchString="searchStr"
                :inputType="'search'"
              )
              button.button.button--primary.button--accent.flex(type="button" @click="manager(null)") New Success Story
            span.passthrough(v-for="category in c")
              .use-case-category(
                  v-show="getCategoryUseCases(category).length && catsChecked[category.slug]"
                  )
                .use-case-category-inner
                  h4.use-case-category__headline {{ category.name }}
                  .use-case.flex(v-for="(u, index) in getCategoryUseCases(category)" :key="u.urlOfFirstVideo")
                    .flex.flex-start
                      button.button--includeVid(
                        type="button"
                        :ref="`checkbox_${category.slug}_${index}`"
                        :aria-pressed="u.urlOfFirstVideo === videosFeatured[category.slug].vidURL || u.urlOfFirstVideo === videosFeatured[category.slug].vids[0].srcVideo || u.urlOfFirstVideo === videosFeatured[category.slug].vids[1].srcVideo || u.urlOfFirstVideo === videosFeatured[category.slug].vids[2].srcVideo"
                        :data-category="category.slug"
                        :data-videourl="u.urlOfFirstVideo"
                        :data-thumburl="u.thumbnail"
                        :name="`${category.slug}_checkboxVidIncluded`"
                        @click="setFirebaseIncludedVid"
                      )

                      label.label--featured
                        //not quite sure why v-model isnT here instead of value when i try
                        //would like the already selected video show as such on load...
                        //thinking i need reference in data or computed...
                        input.input--radio.hidden--visually(
                          type="radio"
                          :ref="`radio_${category.slug}_${index}`"
                          :name="`${category.slug}`"
                          :checked="u.urlOfFirstVideo === videosFeatured[category.slug].vidURL"
                          :data-category="category.slug"
                          :data-videourl="u.urlOfFirstVideo"
                          :data-thumburl="u.thumbnail"
                          :disabled="!u.urlOfFirstVideo"
                          @input="setFirebaseFeaturedVid"
                        )
                        span.radio__icon
                    .use-case-details.flex.flex-grow.align-self-center(@click="editUseCase($event, u)")
                      | {{ u.name }}
                    .flex.flex-end
                      button.button.button--action.button--primary(
                        type="button"
                        @click="editUseCase($event, u)"
                      ) Edit
                      button.button.button--action.danger.icon--delete(
                        type="button"
                        @click="secondaryActionHandler($event, u)"
                      )
                        <svg viewBox="0 0 32 32" width="16" height="16" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M28 6 L6 6 8 30 24 30 26 6 4 6 M16 12 L16 24 M21 12 L20 24 M11 12 L12 24 M12 6 L13 2 19 2 20 6" /></svg>
        ModalAdmin(
          v-if="modalShowing"
          :question-text="`Delete '${deleteData.useCaseName}'?`"
          close-which-modal="closeAdminListModal"

        )
          .flex.flex-grow.space-between
            button.button.danger(
              type="button"
              @click="secondaryConfirm($event, deleteData.useCaseID)"
            ) Yes, delete
            button.button(
              type="button"
              @click="secondaryCancel"
            ) No

</template>

<script>
import { mapState } from 'vuex';
import { db, firebaseFieldValue } from '@/global/Constants';
import ModalAdmin from '@/components/Admin/ModalAdmin.vue';
import Search from '@/components/Global/Search.vue';

export default {
  name: 'AdminList',
  components: { ModalAdmin, Search },
  data() {
    return {
      useCases: [],
      deleteData: {
        useCase: false,
        useCaseID: null,
        useCaseName: null,
      },
      modal: false,
      searchStr: null,
      selectedCategories: [],
      filters: ['', 'date'],
      catsChecked: {
        productivity: true,
        infrastructure: true,
        continuity: true,
        security: true,
        network: true,
        communications: true,
        operations: true,
      },
    };
  },
  computed: {
    ...mapState(['c', 'activeSuccessStory', 'videosFeatured']),
    modalShowing() {
      return this.$store.state.adminModalListShowing;
    },
  },
  methods: {
    buildList() {
      db.collection('successStory')
        .get()
        .then((results) => {
          // const invites = [];
          this.useCases = [];
          results.forEach((u) => {
            const useCase = u.data();
            useCase.id = u.id;

            this.useCases.push(useCase);
          });
        });
    },
    filterResults(e) {
      const searchQry = e.target.value;
      this.searchStr = searchQry;
    },
    filterCategory(e, category) {
      if (category === 'all') {
        this.selectedCategories = [];
        this.searchStr = null;
        return;
      }
      const index = this.selectedCategories.indexOf(category);

      if (index > -1) {
        this.selectedCategories.splice(index, 1);
      } else {
        this.selectedCategories.push(category);
      }
    },
    manager(successStory) {
      this.$store.state.activeSuccessStory = successStory;
      this.$router.push('/admin/detail');
    },
    getCategoryUseCases(c) {
      return this.useCases.filter((u) => {
        const category = u.category === c.id;
        if (this.searchStr) {
          const match =
            u.name.toLowerCase().indexOf(this.searchStr.toLowerCase()) > -1;

          return category && match;
        }
        return category;
      });
    },
    editUseCase(e, u) {
      e.preventDefault();
      this.manager(u);
    },
    deleteUseCase(e, itemID) {
      console.log('get ready to delete', itemID);
      db.collection('successStory')
        .doc(itemID)
        .delete()
        .then(() => {
          this.buildList();
          this.deleteData.useCaseID = null;
          this.$store.commit('closeAdminListModal');
        });
    },
    secondaryActionHandler(event, item) {
      console.log(event, item);
      this.deleteData.useCaseID = item.id;
      this.deleteData.useCaseName = item.name;
      this.$store.commit('openAdminListModal');
    },
    secondaryCancel() {
      this.$store.commit('closeAdminListModal');
    },
    secondaryConfirm(event, deleteData, useCaseID) {
      this.deleteUseCase(event, deleteData, useCaseID);
      this.$store.commit('closeAdminListModal');
    },
    setFirebaseIncludedVid(event) {
      if (event.target.getAttribute('aria-pressed') === 'true') {
        event.target.setAttribute('aria-pressed', 'false');
        // yeah these really are strings not true booleans right
        db.collection('videosFeatured')
          .doc(`${event.target.dataset.category}`)
          .update({
            vids: firebaseFieldValue.arrayRemove({
              srcThumb: event.target.dataset.thumburl,
              srcVideo: event.target.dataset.videourl,
            }),
          });
      } else {
        event.target.setAttribute('aria-pressed', 'true');
        db.collection('videosFeatured')
          .doc(`${event.target.dataset.category}`)
          .update({
            vids: firebaseFieldValue.arrayUnion({
              srcThumb: event.target.dataset.thumburl,
              srcVideo: event.target.dataset.videourl,
            }),
          });
      }
    },
    setFirebaseFeaturedVid(evt) {
      if (evt.target.value.length) {
        db.collection('videosFeatured')
          .doc(evt.target.name)
          .update({
            vidURL: evt.target.dataset.videourl,
          });
      }
    },
  },
  created() {
    this.buildList();
  },
};
</script>