{"version":3,"file":"index-D_hbX-Do.js","sources":["../../../app/javascript/shared/buttons/clear-selection.vue","../../../app/javascript/shared/selection-options.vue","../../../app/javascript/photos/index.vue"],"sourcesContent":["<template>\n  <button\n    class=\"button is-danger\"\n    :disabled=\"disabled\"\n    @click=\"modalActive = true\"\n  >\n    <span class=\"icon\">\n      <i class=\"fas fa-times\"></i>\n    </span>\n    <span>Clear Selection</span>\n  </button>\n  <teleport to=\"#modal-root\">\n    <div :class=\"['modal', modalActive ? 'is-active' : null]\">\n      <div class=\"modal-background\"></div>\n      <div class=\"modal-card\">\n        <header class=\"modal-card-head\">\n          <p class=\"modal-card-title has-text-centered\">Clear Selection</p>\n        </header>\n        <div class=\"modal-card-body\">\n          <p>Are you sure you want to clear the selection?</p>\n        </div>\n        <footer class=\"modal-card-foot is-justify-content-center\">\n          <button class=\"button is-danger\" @click=\"performClearSelection\">\n            Clear\n          </button>\n          <button class=\"button is-info\" @click=\"modalActive = false\">\n            Cancel\n          </button>\n        </footer>\n      </div>\n    </div>\n  </teleport>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\n\nimport { useSelectionStore } from \"@/stores/selection\";\n\nconst props = defineProps({\n  disabled: {\n    type: Boolean,\n    required: false,\n    default: false,\n  },\n});\n\nconst selectionStore = useSelectionStore();\n\nconst modalActive = ref(false);\n\nconst performClearSelection = () => {\n  modalActive.value = false;\n  selectionStore.clearPhotoSelection();\n};\n</script>\n","<template>\n  <div class=\"message is-warning\">\n    <div class=\"message-body content\">\n      <p v-if=\"selectionCount > 0\">\n        You have selected <strong>{{ selectionCount }}</strong> photos.\n      </p>\n      <p v-else>You have not selected any photos.</p>\n      <div class=\"level\">\n        <div class=\"level-left\">\n          <div class=\"buttons\">\n            <router-link\n              :to=\"buttonsDisabled ? {} : { name: 'photos-organizer' }\"\n              :disabled=\"buttonsDisabled ? 'disabled' : null\"\n              class=\"button is-primary\"\n            >\n              Go to the Organizer\n            </router-link>\n            <ClearSelectionButton :disabled=\"buttonsDisabled\" />\n          </div>\n        </div>\n        <div class=\"level-right\">\n          <div class=\"buttons\">\n            <button class=\"button\" @click=\"addAllOnPage()\">\n              <span class=\"icon-text\">\n                <span class=\"icon\"><i class=\"far fa-check-square\"></i></span>\n                <span>Select All Photos On This Page</span>\n              </span>\n            </button>\n            <button class=\"button\" @click=\"removeAllOnPage()\">\n              <span class=\"icon-text\">\n                <span class=\"icon\"><i class=\"far fa-square\"></i></span>\n                <span>Deselect All Photos On This Page</span>\n              </span>\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed } from \"vue\";\n\nimport { useSelectionStore } from \"@/stores/selection\";\n\nimport ClearSelectionButton from \"@/shared/buttons/clear-selection.vue\";\n\nconst props = defineProps({\n  photos: {\n    type: Array,\n    required: true,\n  },\n});\n\nconst selectionStore = useSelectionStore();\n\nconst selectionCount = computed(() => selectionStore.selectedPhotos.length);\nconst buttonsDisabled = computed(() => selectionCount.value === 0);\n\nconst addAllOnPage = () => {\n  selectionStore.addPhotos(props.photos);\n};\n\nconst removeAllOnPage = () => {\n  selectionStore.removePhotos(props.photos);\n};\n</script>\n","<template>\n  <section class=\"section-pt-pb-0\">\n    <div class=\"container\">\n      <div class=\"level mb-0 mt-5\">\n        <div class=\"level-left\">\n          <div class=\"level-item\">\n            <h1 class=\"title\">Photos</h1>\n          </div>\n        </div>\n        <div\n          class=\"level-right\"\n          v-if=\"userStore.signedIn && userStore.uploader\"\n        >\n          <div class=\"level-item\">\n            <button\n              class=\"button is-small\"\n              v-if=\"userStore.signedIn && !applicationStore.selectionMode\"\n              @click=\"applicationStore.enterSelectionMode()\"\n            >\n              Enter Selection Mode\n            </button>\n            <button\n              class=\"button is-small\"\n              v-if=\"userStore.signedIn && applicationStore.selectionMode\"\n              @click=\"applicationStore.exitSelectionMode()\"\n            >\n              <span class=\"icon\"><i class=\"fas fa-sign-out-alt\"></i></span>\n              <span>Exit Selection Mode</span>\n            </button>\n          </div>\n        </div>\n      </div>\n      <hr class=\"mt-2 mb-4\" />\n      <SelectionOptions\n        v-if=\"\n          result &&\n          result.photos &&\n          userStore.signedIn &&\n          applicationStore.selectionMode\n        \"\n        :photos=\"result.photos.collection\"\n      />\n      <div class=\"columns is-1 is-multiline\">\n        <PhotoItem\n          v-if=\"result && result.photos\"\n          v-for=\"photo in result.photos.collection\"\n          :photo=\"photo\"\n          :key=\"photo.id\"\n        />\n      </div>\n      <hr class=\"mt-1 mb-4\" />\n      <Pagination\n        v-if=\"result && result.photos\"\n        :metadata=\"result.photos.metadata\"\n        :additionalQueryParams=\"additionalQueryParams\"\n        routeName=\"photos-index\"\n      />\n    </div>\n  </section>\n</template>\n\n<script setup>\nimport { computed } from \"vue\";\nimport { useRoute } from \"vue-router\";\nimport gql from \"graphql-tag\";\nimport { useTitle } from \"vue-page-title\";\nimport { useQuery } from \"@vue/apollo-composable\";\nimport { useApplicationStore } from \"@/stores/application\";\nimport { useUserStore } from \"@/stores/user\";\n\n// components\nimport SelectionOptions from \"@/shared/selection-options.vue\";\nimport PhotoItem from \"@/shared/photo-item.vue\";\nimport Pagination from \"@/shared/pagination.vue\";\n\nuseTitle(\"Photos\"); // todo: add page number\n\nconst route = useRoute();\nconst query = computed(() => route.query.q || null);\nconst page = computed(() => parseInt(route.query.page) || 1);\nconst additionalQueryParams = computed(() =>\n  query.value !== null ? { q: query.value } : {},\n);\n\nconst applicationStore = useApplicationStore();\nconst userStore = useUserStore();\n\nconst { result } = useQuery(\n  gql`\n    ${gql_queries.photos_index}\n  `,\n  { page: page, query: query },\n);\n</script>\n"],"names":["selectionStore","useSelectionStore","modalActive","ref","performClearSelection","props","__props","selectionCount","computed","buttonsDisabled","addAllOnPage","removeAllOnPage","useTitle","route","useRoute","query","page","additionalQueryParams","applicationStore","useApplicationStore","userStore","useUserStore","result","useQuery","gql"],"mappings":"+gBA+CA,MAAMA,EAAiBC,EAAmB,EAEpCC,EAAcC,EAAI,EAAK,EAEvBC,EAAwB,IAAM,CAClCF,EAAY,MAAQ,GACpBF,EAAe,oBAAqB,CACtC,ijCCNA,MAAMK,EAAQC,EAORN,EAAiBC,EAAmB,EAEpCM,EAAiBC,EAAS,IAAMR,EAAe,eAAe,MAAM,EACpES,EAAkBD,EAAS,IAAMD,EAAe,QAAU,CAAC,EAE3DG,EAAe,IAAM,CACzBV,EAAe,UAAUK,EAAM,MAAM,CACvC,EAEMM,EAAkB,IAAM,CAC5BX,EAAe,aAAaK,EAAM,MAAM,CAC1C,mqCCSAO,EAAS,QAAQ,EAEjB,MAAMC,EAAQC,EAAU,EAClBC,EAAQP,EAAS,IAAMK,EAAM,MAAM,GAAK,IAAI,EAC5CG,EAAOR,EAAS,IAAM,SAASK,EAAM,MAAM,IAAI,GAAK,CAAC,EACrDI,EAAwBT,EAAS,IACrCO,EAAM,QAAU,KAAO,CAAE,EAAGA,EAAM,KAAK,EAAK,CAAE,CAChD,EAEMG,EAAmBC,EAAqB,EACxCC,EAAYC,EAAc,EAE1B,CAAE,OAAAC,CAAQ,EAAGC,EACjBC;AAAA,MACI,YAAY,YAAY;AAAA,IAE5B,CAAE,KAAMR,EAAM,MAAOD,CAAO,CAC9B"}