22372

Committed 18 Jun 2026 04:40PM UTC coverage: 70.948% (+0.1%) from 70.814%

Build # 22372

Build Type

Pull #618

circleci

Committed by

edwh

Commit Message

feat(bulk-offer): never send bulk/clearance offers to LoveJunk

LoveJunk's draft model is one item per post and can't represent a
multi-item clearance, so bulk offers (messages with messages_bulk_items
rows) must not be pushed at all. Add a NOT EXISTS guard to the
"new offers" selection in both the live Laravel sync (LoveJunkService)
and the legacy V1 cron (iznik-server/scripts/cron/lovejunk.php). Because
bulk offers then never enter the lovejunk table, the edit/outcome paths
skip them too.

Test: test_skips_bulk_offer_message asserts a message with bulk items is
neither sent nor recorded. Full LoveJunkService suite green (13).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015f3YY7RTNdsW6WSEa3dRWg

Pull Request Pull Request #618: feat(bulk-offer): structured multi-item clearance listings + per-item interest

Coverage Stats

11296 of 15014 branches covered (75.24%)

Branch coverage included in aggregate %.

2080 of 2593 new or added lines in 23 files covered. (80.22%)

2 existing lines in 1 file now uncovered.

120965 of 171406 relevant lines covered (70.57%)

36.05 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

88.17

/iznik-nuxt3/modtools/components/ModMessage.vue

<template>
  <div v-if="message">
    <div ref="top" style="position: relative; top: -66px" />
    <b-card bg-variant="white" no-body>
      <b-card-header class="p-1 p-md-2">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1" style="min-width: 0">
            <NoticeMessage
              v-if="editing && !message.lat && !message.lng"
              variant="danger"
              class="mb-2 me-2"
            >
              This message needs editing so that we know where it is. Please put
              in a postcode (it doesn't have to be exactly right - do your best
              based on the subject).
              <b-input-group>
                <PostCode
                  class="mt-2"
                  value=""
                  :find="false"
                  @selected="postcodeSelect"
                />
              </b-input-group>
            </NoticeMessage>
            <div v-if="editing && editmessage" class="d-flex flex-wrap">
              <ModGroupSelect
                v-model="editgroup"
                modonly
                class="me-1"
                size="lg"
                :disabled-except-for="memberGroupIds"
                :disabled="fromUser?.tnuserid"
              />
              <div
                v-if="editmessage.item && editmessage.location"
                class="d-flex flex-wrap flex-grow-1"
              >
                <b-form-select
                  v-model="editmessage.type"
                  :options="typeOptions"
                  class="type me-1"
                  size="lg"
                />
                <b-form-input
                  v-model="editmessage.item.name"
                  size="lg"
                  class="me-1 flex-grow-1 item-name-input"
                />
              </div>
              <div v-if="editmessage.item && editmessage.location">
                <b-input-group>
                  <PostCode
                    :value="editmessage.location.name"
                    :find="false"
                    @selected="postcodeSelect"
                  />
                </b-input-group>
              </div>
              <div
                v-else
                class="flex-grow-1 ps-0 ps-md-2 pe-0 pe-md-2 fullsubject"
              >
                <label class="me-2">Subject:</label>
                <b-form-input v-model="editmessage.subject" size="lg" />
                <label class="me-2">Post type:</label>
                <b-form-select
                  v-model="editmessage.type"
                  :options="typeOptions"
                  class="type me-1"
                  size="lg"
                />
              </div>
            </div>
            <ModDiff
              v-else-if="editreview && oldSubject && newSubject"
              :old="oldSubject"
              :new="newSubject"
              class="fw-bold"
            />
            <div v-else :class="subjectClass + ' fw-bold'">
              <span
                v-if="message.matchedon && message.matchedon.type === 'Vector'"
                class="highlight"
                >{{ eSubject }}</span
              >
              <Highlighter
                v-else-if="message.matchedon"
                :search-words="[String(message.matchedon.word)]"
                :text-to-highlight="eSubject"
                highlight-class-name="highlight"
                auto-escape
              />
              <span v-else>
                {{ eSubject }}
              </span>
              <span v-if="message.location" class="text-muted small ms-1">{{
                message.location.name
              }}</span>
              <span
                v-if="
                  message.availableinitially && message.availableinitially > 1
                "
                class="small text-info ms-1"
              >
                <b-badge
                  v-if="message.availableinitially === message.availablenow"
                  variant="info"
                >
                  {{ message.availablenow }} available
                </b-badge>
                <b-badge v-else variant="info">
                  {{ message.availableinitially }} available initially,
                  {{ message.availablenow ? message.availablenow : 0 }} now
                </b-badge>
              </span>
            </div>
            <span
              v-if="pending && (editreview || review)"
              class="badge bg-warning text-dark ms-1"
            >
              Pending
            </span>
            <!-- Approved-by is shown by MessageHistory with resolved name -->
            <div v-if="message.deadline" class="text-danger small">
              Deadline: end {{ dateonly(message.deadline) }}
            </div>
            <div v-if="message.deliverypossible" class="text-info small">
              Delivery possible
            </div>
            <MessageHistory
              :id="message.id"
              :message="message"
              modinfo
              display-message-link
            />
            <div
              v-if="homegroup && groupid && groupid !== homegroupids[0]"
              class="small text-danger"
            >
              Possibly should be on {{ homegroup }}
              <span v-if="!homegroupontn"> but group not on TN </span>
            </div>
            <div v-if="otherGroups.length > 0" class="small text-muted">
              Also on:
              <span v-for="(g, idx) in otherGroups" :key="g.groupid"
                >{{
                  groupStore.get(g.groupid)?.namedisplay ||
                  'Group ' + g.groupid
                }}<span v-if="idx < otherGroups.length - 1">, </span></span
              >
            </div>
            <ModMessageDuplicate
              v-for="(duplicate, index) in duplicates"
              :key="'duplicate-' + duplicate.id + '-' + index"
              :messageid="duplicate.id"
            />
            <ModMessageCrosspost
              v-for="crosspost in crossposts"
              :key="'crosspost-' + crosspost.id"
              :messageid="crosspost.id"
            />
            <div v-if="expanded">
              <ModMessageRelated
                v-for="related in message.related"
                :key="'related-' + related.id"
                :messageid="related.id"
              />
            </div>
          </div>
          <div class="d-flex flex-shrink-0">
            <div
              v-if="summary && message && fromUser"
              class="text-info fw-bold me-2 text-truncate d-inline-block"
              style="max-width: 8rem"
            >
              {{ fromUser.displayname }}
              <span v-if="fromUser.deleted" class="badge bg-danger ms-1">
                Account deleted
              </span>
            </div>
            <span
              v-else-if="fromUser && fromUser.deleted"
              class="badge bg-danger me-2 align-self-center"
            >
              Account deleted
            </span>
            <div v-if="expanded" class="d-flex">
              <div class="d-flex flex-column align-content-end">
                <b-button v-if="!editing" variant="white" @click="startEdit">
                  <v-icon icon="pen" /><span class="d-none d-sm-inline">
                    Edit</span
                  >
                </b-button>
                <b-button
                  v-if="message.source === 'Email'"
                  variant="white"
                  class="mt-2"
                  @click="showEmailSourceModal = true"
                >
                  <v-icon icon="book-open" /><span class="d-none d-sm-inline">
                    View Email Source</span
                  >
                </b-button>
                <SpinButton
                  v-if="contextGroup?.collection === 'Approved'"
                  class="mt-2"
                  variant="white"
                  icon-name="reply"
                  confirm
                  @handle="backToPending"
                  ><span class="d-none d-sm-inline"
                    >Back to Pending</span
                  ></SpinButton
                >
              </div>
              <div class="ms-2">
                <b-button
                  v-if="summary"
                  variant="white"
                  @click="expanded = !expanded"
                >
                  <v-icon icon="caret-up" />
                </b-button>
              </div>
            </div>
            <div v-else>
              <b-button variant="white" @click="expanded = !expanded">
                <v-icon icon="caret-down" />
              </b-button>
            </div>
          </div>
        </div>
      </b-card-header>
      <b-card-body v-if="expanded" class="p-1 p-md-2">
        <b-row>
          <b-col cols="12" lg="5">
            <NoticeMessage
              v-if="message.type === 'Other'"
              variant="danger"
              class="mb-2"
            >
              This message needs editing so that we know what kind of post it
              is.
            </NoticeMessage>
            <div v-if="expanded">
              <NoticeMessage
                v-if="message.outcomes && message.outcomes.length"
                class="mb-1"
              >
                {{ message.outcomes[0].outcome.toUpperCase() }}
                at
                {{ datetimeshort(message.outcomes[0].timestamp) }}
              </NoticeMessage>
              <div v-if="message.heldby">
                <NoticeMessage variant="warning" class="mb-2">
                  <p v-if="me.id === heldbyId">
                    You held this. Other people will see a warning to check with
                    you before releasing it. If you release it, it will stay in
                    Pending.
                  </p>
                  <p v-else>
                    Held by <strong>{{ heldbyName }}</strong
                    >. Please check with them before releasing it.
                  </p>
                  <ModMessageButton
                    :messageid="message.id"
                    :groupid="groupid"
                    variant="warning"
                    icon="play"
                    release
                    label="Release"
                  />
                </NoticeMessage>
              </div>
            </div>
            <div v-if="!fromUser && fromUserId" class="mb-2">
              <Spinner :size="20" />
            </div>
            <div v-if="fromUser">
              <NoticeMessage
                v-if="fromUser.deleted"
                variant="danger"
                class="mb-2"
              >
                This user has deleted their account. You may wish to handle this
                message accordingly as they will not be able to respond.
              </NoticeMessage>
              <ModComments
                :userid="fromUserId"
                @update-comments="updateComments"
              />
              <ModSpammer v-if="fromUser.spammer" :userid="fromUserId" />
              <NoticeMessage
                v-if="fromUser.activedistance > 50"
                variant="warning"
                class="mb-2"
              >
                This freegler recently active on groups
                {{ fromUser.activedistance }} miles apart.
              </NoticeMessage>
            </div>
            <NoticeMessage v-if="outsideUK" variant="warning" class="mb-2">
              This message may be from outside the UK ({{ position.lat }},
              {{ position.lng }}), which means it might be a scam. Please check
              carefully.
            </NoticeMessage>
            <NoticeMessage
              v-if="message.spamreason"
              variant="warning"
              class="mb-2"
            >
              {{ message.spamreason }}
            </NoticeMessage>
            <NoticeMessage
              v-if="
                pending &&
                membership &&
                membership.ourpostingstatus === 'MODERATED'
              "
              variant="info"
              class="mb-2"
            >
              This member is <strong>Moderated</strong> — their posts need
              approval before going live.
            </NoticeMessage>
            <div
              v-if="
                message.microvolunteering && message.microvolunteering.length
              "
            >
              <ModMessageMicroVolunteering
                v-for="m in message.microvolunteering"
                :key="'microvolunteering-' + m.id"
                :messageid="message.id"
                :microvolunteeringid="m.id"
                class="mb-1"
              />
              <b-button
                v-if="pending"
                v-b-tooltip.html
                variant="white"
                size="sm"
                title="<p>We ask members to review messages as part of microvolunteering.  When members have proven that they are reliable at microvolunteering, they may be shown Pending messages, so you may see their views here.  This can also show for Pending messages for reposts. <p>You can control whether specific members can do microvolunteering - click on their user id.</p>"
              >
                <v-icon icon="info-circle" /> What's this?
              </b-button>
              <b-button
                v-else
                v-b-tooltip.html
                variant="white"
                size="sm"
                title="<p>We ask members to review messages as part of microvolunteering.  Messages will be sent for review if a couple of members think they shouldn't be on Freegle.</p><p>Consider whether you (or the original poster) can edit the message to improve it.</p><p>You can control whether specific members can do microvolunteering - click on their user id.</p>"
              >
                <v-icon icon="info-circle" /> What's this?
              </b-button>
              <p class="text-muted small" />
            </div>
            <ModMessageWorry
              v-if="
                message.worry?.length ||
                message.groups?.some(
                  (g) => g.contentcheck_reasons && g.contentcheck_reasons.length
                )
              "
              :messageid="message.id"
            />
            <div v-if="expanded">
              <!-- eslint-disable-next-line -->
              <b-form-textarea
                v-if="editing"
                v-model="editmessage.textbody"
                rows="8"
                class="mb-3"
              />
              <div v-else-if="editreview">
                <template v-if="oldBody || newBody">
                  <h4>Differences:</h4>
                  <ModDiff
                    class="mb-3 rounded border border-warning p-2 preline forcebreak fw-bold"
                    :old="oldBody"
                    :new="newBody"
                  />
                  <h4>New version:</h4>
                  <div
                    class="mb-3 rounded border border-success p-2 preline forcebreak fw-bold"
                  >
                    {{ newBody }}
                  </div>
                </template>
                <p v-else class="text-muted">
                  Subject changed (see above). No body text changes.
                </p>
              </div>
              <div
                v-else-if="!eBody"
                class="mb-3 rounded border p-2 preline forcebreak fw-bold"
              >
                <em>This message is blank.</em>
              </div>
              <div
                v-else
                class="mb-3 rounded border p-2 preline forcebreak fw-bold"
              >
                <span
                  v-if="
                    message.matchedon && message.matchedon.type === 'Vector'
                  "
                  class="highlight"
                  >{{ eBody }}</span
                >
                <Highlighter
                  v-else-if="message.matchedon"
                  :search-words="[String(message.matchedon.word)]"
                  :text-to-highlight="eBody"
                  highlight-class-name="highlight"
                  auto-escape
                />
                <span v-else>
                  {{ eBody }}
                </span>
              </div>
              <b-alert
                v-if="isBulk"
                :model-value="true"
                variant="info"
                class="mb-3"
              >
                <strong>
                  <v-icon icon="boxes-stacked" /> Bulk clearance —
                  {{ message.bulkcount }} item{{
                    message.bulkcount === 1 ? '' : 's'
                  }}.
                </strong>
                This is a single post on the group, but when a member opens it
                they can see each item and turn on the ones they'd like (and how
                many).
                <b-button
                  variant="link"
                  class="p-0 ms-1 align-baseline"
                  data-testid="bulk-preview-btn"
                  @click="showBulkPreview = true"
                >
                  See how members see it
                </b-button>
              </b-alert>
              <div v-if="attachments?.length" class="w-100 d-flex flex-wrap">
                <div
                  v-for="attachment in attachments"
                  :key="'attachment-' + attachment.id"
                  :class="{
                    'd-inline': true,
                    'pe-1': true,
                    addedImage: imageAdded(attachment.id),
                    removeImage: imageRemoved(attachment.id),
                  }"
                >
                  <div class="addedMessage ps-2 fw-bold text-success">
                    Added
                  </div>
                  <div class="removedMessage ps-2 fw-bold text-warning">
                    Removed
                  </div>
                  <ModPhoto
                    :messageid="messageid"
                    :attachmentid="attachment.id"
                  />
                </div>
              </div>
              <MessageReplyInfo
                v-if="!pending || (message.replies && message.replies.length)"
                :message="message"
                class="d-inline"
              />
            </div>
          </b-col>
          <b-col cols="12" lg="3">
            <MessageMap
              v-if="group && position"
              :centerat="{ lat: group.lat, lng: group.lng }"
              :position="{ lat: position.lat, lng: position.lng }"
              locked
              :boundary="group.poly || group.polyofficial"
              :height="150"
            />
          </b-col>
          <b-col cols="12" lg="3">
            <div
              class="rounded border border-info p-2 d-flex justify-content-between flex-wrap"
            >
              <ModMessageUserInfo
                v-if="fromUser && message.groups && message.groups.length"
                :message="message"
                :userid="fromUserId"
                modinfo
                :groupid="groupid"
              />
              <div v-else-if="fromUserId && !fromUser">
                <Spinner :size="20" />
              </div>
              <div v-else>
                <NoticeMessage
                  v-if="
                    message.myrole === 'Non-member' ||
                    message.myrole === 'Member'
                  "
                  variant="danger"
                >
                  Sender only available to mods.
                </NoticeMessage>
                <NoticeMessage v-else variant="danger">
                  Can't identify sender. Could have been purged but perhaps a
                  bug.
                </NoticeMessage>
              </div>
            </div>
            <div class="d-flex justify-content-between flex-wrap">
              <b-button
                v-if="fromUser && !fromUser.ljuserid && !fromUser.tnuserid"
                variant="link"
                @click="toggleMail"
              >
                <span v-if="showMailSettings">
                  <v-icon icon="cog" />
                  <span class="d-inline d-sm-none"> Hide </span>
                  <span class="d-none d-sm-inline"> Hide mail settings </span>
                </span>
                <span v-else>
                  <v-icon icon="cog" />
                  <span class="d-inline d-sm-none"> Settings </span>
                  <span class="d-none d-sm-inline"> Show mail settings </span>
                </span>
              </b-button>
              <b-button
                v-if="fromUser && fromUser.emails && fromUser.emails.length"
                variant="link"
                @click="showEmails = !showEmails"
              >
                <span v-if="showEmails">
                  <span class="d-inline d-sm-none"> Hide </span>
                  <span class="d-none d-sm-inline">
                    Hide
                    {{ pluralise('email', fromUser.emails.length, true) }}
                  </span>
                </span>
                <span v-else>
                  <span class="d-inline d-sm-none">
                    <v-icon icon="envelope" />
                    {{ pluralise('email', fromUser.emails.length, true) }}
                  </span>
                  <span class="d-none d-sm-inline">
                    Show
                    {{ pluralise('email', fromUser.emails.length, true) }}
                  </span>
                </span>
              </b-button>
              <b-button variant="link" @click="showActions = !showActions">
                <v-icon icon="hammer" />
                <span v-if="showActions">
                  <span class="d-inline d-sm-none"> Hide </span>
                  <span class="d-none d-sm-inline"> Hide actions </span>
                </span>
                <span v-else>
                  <span class="d-inline d-sm-none"> Actions </span>
                  <span class="d-none d-sm-inline"> Show actions </span>
                </span>
              </b-button>
            </div>
            <SettingsGroup
              v-if="
                showMailSettings &&
                membership &&
                message.groups &&
                message.groups.length
              "
              :emailfrequency="membership.emailfrequency"
              :membership-m-t="membership"
              class="border border-info mt-2 p-1"
              :userid="fromUserId"
              @update:emailfrequency="settingsChange('emailfrequency', $event)"
              @update:eventsallowed="settingsChange('eventsallowed', $event)"
              @update:volunteeringallowed="
                settingsChange('volunteeringallowed', $event)
              "
            />
            <div v-if="showEmails && fromUser">
              <div v-for="email in fromUser.emails" :key="email.id">
                {{ email.email }} <v-icon v-if="email.preferred" icon="star" />
              </div>
            </div>
            <ModMemberActions
              v-if="showActions && message.groups && message.groups.length"
              :userid="fromUserId"
              :groupid="groupid"
              @commentadded="updateComments"
            />
          </b-col>
        </b-row>
        <div
          v-if="review && message.groups && message.groups.length"
          class="mt-1"
        >
          <b-alert
            v-if="contextGroup?.collection === 'Pending'"
            variant="info"
            show
          >
            <v-icon icon="info-circle" /> Post now in <em>Pending</em>.
          </b-alert>
          <b-alert
            v-if="contextGroup?.collection === 'Approved'"
            variant="info"
            show
          >
            <v-icon icon="info-circle" /> Post now in <em>Approved</em>.
          </b-alert>
        </div>
        <b-row v-if="uploading" class="bg-white">
          <b-col class="p-0">
            <OurUploader v-model="attachments" type="Message" multiple />
          </b-col>
        </b-row>
      </b-card-body>
      <b-card-footer v-if="!noactions && expanded">
        <div v-if="message.heldby && heldbyId !== myid">
          This message is held by someone else. The buttons are hidden so you
          don't click them by accident. Please check with them before releasing
          the message.
        </div>
        <NoticeMessage
          v-else-if="!editing && !message.lat && !message.lng"
          variant="danger"
          class="mb-2"
        >
          This message needs editing so that we know where it is.
        </NoticeMessage>
        <div
          v-if="
            pending &&
            (!message.heldby || (message.heldby && heldbyId === myid)) &&
            !editing
          "
          class="text-end mb-1"
        >
          <b-button variant="danger" @click="spamReport">
            <v-icon icon="ban" /> Report Spammer
          </b-button>
        </div>
        <ModMessageButtons
          v-if="
            (!message.heldby || (message.heldby && heldbyId === myid)) &&
            !editing
          "
          :messageid="message.id"
          :groupid="groupid"
          :modconfigid="configid"
          :editreview="editreview"
          :cantpost="membership && membership.ourpostingstatus === 'PROHIBITED'"
        />
        <b-button
          v-if="editing"
          variant="secondary"
          class="me-auto"
          @click="photoAdd"
        >
          <v-icon icon="camera" />&nbsp;Add photo
        </b-button>
        <b-button v-if="editing" variant="white" @click="cancelEdit">
          <v-icon icon="times" /> Cancel
        </b-button>
        <b-button v-if="editing" variant="primary" @click="save">
          <v-icon v-if="saving" icon="sync" class="text-success fa-spin" />
          <v-icon v-else-if="saved" icon="check" class="text-success" />
          <v-icon v-else icon="save" />
          Save
        </b-button>
      </b-card-footer>
    </b-card>
    <ModMessageEmailModal
      v-if="showEmailSourceModal && message.source === 'Email'"
      :id="message.id"
      @hidden="showEmailSourceModal = false"
    />
    <ModSpammerReport
      v-if="showSpamModal"
      ref="spamConfirm"
      :userid="fromUserId"
      :safelist="false"
    />
    <ModBulkPreviewModal
      v-if="showBulkPreview"
      :messageid="message.id"
      @hidden="showBulkPreview = false"
    />
    <div ref="bottom" />
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import Highlighter from 'vue-highlight-words'

import { useAuthStore } from '~/stores/auth'
import { useGroupStore } from '~/stores/group'
import { useLocationStore } from '~/stores/location'
import { useMessageStore } from '~/stores/message'
import { useUserStore } from '~/stores/user'

import { setupKeywords } from '~/composables/useKeywords'
import { useMemberStore } from '~/stores/member'
import { useModConfigStore } from '~/stores/modconfig'
import { useMiscStore } from '~/stores/misc'
import { SUBJECT_REGEX } from '~/constants'
import { useMe } from '~/composables/useMe'
import { useModMe } from '~/composables/useModMe'

import { useModGroupStore } from '@/stores/modgroup'

import { twem } from '~/composables/useTwem'

const props = defineProps({
  messageid: {
    type: Number,
    required: true,
  },
  editreview: {
    type: Boolean,
    required: false,
    default: false,
  },
  noactions: {
    type: Boolean,
    required: false,
    default: false,
  },
  summary: {
    type: Boolean,
    required: false,
    default: false,
  },
  review: {
    type: Boolean,
    required: false,
    default: false,
  },
  search: {
    type: String,
    required: false,
    default: null,
  },
  next: {
    type: Number,
    required: false,
    default: null,
  },
  nextAfterRemoved: {
    type: Number,
    required: false,
    default: null,
  },
  contextGroupid: {
    type: Number,
    required: false,
    default: null,
  },
})

const emit = defineEmits(['destroy'])

const authStore = useAuthStore()
const groupStore = useGroupStore()
const locationStore = useLocationStore()
const memberStore = useMemberStore()
const messageStore = useMessageStore()
const miscStore = useMiscStore()
const modconfigStore = useModConfigStore()
const modGroupStore = useModGroupStore()
const userStore = useUserStore()

const message = computed(() => messageStore.byId(props.messageid))

watch(
  () => props.messageid,
  async (id) => {
    if (id && !messageStore.byId(id)) {
      await messageStore.fetch(id)
    }
  },
  { immediate: true }
)

// V2 API returns fromuser as a numeric ID. Resolve from user store reactively.
const fromUserId = computed(() => {
  if (!message.value) return null
  const fu = message.value.fromuser
  if (!fu) return null
  return typeof fu === 'number' ? fu : fu.id
})

// Trigger a fetch if the user isn't in the store yet.
watch(
  fromUserId,
  (uid) => {
    if (uid && !userStore.byId(uid)) {
      userStore.fetch(uid)
    }
  },
  { immediate: true }
)

const fromUser = computed(() => {
  if (!fromUserId.value) return null
  return userStore.byId(fromUserId.value) || null
})
const { typeOptions } = setupKeywords()
const { me, myid } = useMe()
const { myModGroups, myModGroup } = useModMe()

const top = ref(null)
const bottom = ref(null)
const spamConfirm = ref(null)

const saving = ref(false)
const saved = ref(false)
const showEmailSourceModal = ref(false)
const showSpamModal = ref(false)
const showBulkPreview = ref(false)

// A bulk "clearance" offer carries a structured catalogue of items.
const isBulk = computed(
  () =>
    (message.value?.bulkcount || 0) > 0 ||
    (message.value?.bulkitems?.length || 0) > 0
)
const showMailSettings = ref(false)
const showActions = ref(false)
const showEmails = ref(false)
const editing = ref(false)
const expanded = ref(false)
const editgroup = ref(null)
const uploading = ref(false)
const attachments = ref([])
const homegroup = ref(null)
const homegroupontn = ref(false)
const homegroupids = ref([])
const historyGroups = reactive({})
const editmessage = ref(false)

const groupid = computed(() => {
  // Use contextual groupid prop if provided (multi-group support),
  // otherwise fall back to first group.
  if (props.contextGroupid) return props.contextGroupid

  if (message.value && message.value.groups && message.value.groups.length) {
    return message.value.groups[0].groupid
  }
  return 0
})

const messageGroup = computed(() => {
  return groupid.value || null
})

// Get the group info for the contextual group (multi-group support).
const contextGroup = computed(() => {
  if (!message.value?.groups?.length) return null
  const gid = parseInt(groupid.value)
  return (
    message.value.groups.find((g) => parseInt(g.groupid) === gid) ||
    message.value.groups[0]
  )
})

// Other groups this message is on (for multi-group indicator).
const otherGroups = computed(() => {
  if (!message.value?.groups) return []
  const gid = parseInt(groupid.value)
  return message.value.groups.filter((g) => parseInt(g.groupid) !== gid)
})

const messageHistory = computed(() => {
  return fromUser.value?.messagehistory || []
})

const group = computed(() => {
  let ret = null

  if (messageGroup.value) {
    ret = myModGroups.value.find((g) => parseInt(g.id) === messageGroup.value)
  }

  return ret
})

const position = computed(() => {
  let ret = null

  if (message.value) {
    if (message.value.location) {
      // This is what we put in for message submitted on FD.
      ret = message.value.location
    } else if (message.value.lat || message.value.lng) {
      // This happens for TN messages
      ret = {
        lat: message.value.lat,
        lng: message.value.lng,
      }
    }
  }

  return ret
})

const outsideUK = computed(() => {
  return (
    position.value &&
    (position.value.lng < -16 ||
      position.value.lat < 49 ||
      position.value.lng > 4 ||
      position.value.lat > 64)
  )
})

const pending = computed(() => {
  return hasCollection('Pending')
})

const eSubject = computed(() => {
  if (!message.value) return ''
  return twem(message.value.subject)
})

const eBody = computed(() => {
  if (!message.value) return ''
  return twem(message.value.textbody)
})

// Handle heldby as either numeric ID (Go API) or object (PHP API).
const heldbyId = computed(() => {
  if (!message.value) return null
  const h = message.value.heldby
  if (!h) return null
  return Number.isInteger(h) ? h : h.id
})

const heldbyName = computed(() => {
  if (!message.value) return ''
  const h = message.value.heldby
  if (!h) return ''
  if (Number.isInteger(h)) {
    const user = userStore.byId(h)
    return user?.displayname || ''
  }
  return h.displayname || ''
})

const membership = computed(() => {
  let ret = null

  if (groupid.value && fromUser.value?.memberships) {
    ret = fromUser.value.memberships.find((g) => g.groupid === groupid.value)
  }

  return ret
})

const configid = computed(() => {
  let id = null

  // Look up configid from authStore.groups (always populated from session)
  // rather than relying on modGroupStore.list[].mysettings which may not be
  // populated yet due to a race condition with fetchGroupMT().
  if (groupid.value && authStore.groups) {
    const sessionGroup = authStore.groups.find(
      (g) => parseInt(g.groupid) === parseInt(groupid.value)
    )
    if (sessionGroup?.configid) {
      id = sessionGroup.configid
    }
  }

  if (!id) {
    const defaultConfig = modconfigStore.configs.find(
      (config) => config.default
    )
    id = defaultConfig?.id
  }

  return id
})

const modconfig = ref(null)

watch(
  configid,
  async (id) => {
    if (id) {
      modconfig.value = await modconfigStore.fetchById(id)
    }
  },
  { immediate: true }
)

const subjectClass = computed(() => {
  let ret = 'text-success'

  if (message.value && modconfig.value && modconfig.value.coloursubj) {
    ret =
      message.value.subject?.match &&
      message.value.subject.match(modconfig.value.subjreg)
        ? 'text-success'
        : 'text-danger'
  }

  return ret
})

const oldSubject = computed(() => {
  if (!props.editreview || !message.value || !message.value.edits) {
    return null
  }

  // Edits are in descending time order.
  let oldest = null

  message.value.edits.forEach((edit) => {
    if (edit.reviewrequired && edit.oldsubject) {
      oldest = edit.oldsubject
    }
  })

  return oldest
})

const newSubject = computed(() => {
  if (!props.editreview || !message.value || !message.value.edits) {
    return null
  }

  // Find the newest and oldest texts; intermediates are just confusing.
  // Edits are in descending time order.
  let newest = null

  message.value.edits.forEach((edit) => {
    if (edit.reviewrequired) {
      if (edit.newsubject && !newest) {
        newest = edit.newsubject
      }
    }
  })

  return newest
})

const oldBody = computed(() => {
  if (!props.editreview || !message.value || !message.value.edits) {
    return null
  }

  // Edits are in descending time order.
  let oldest = null

  message.value.edits.forEach((edit) => {
    if (edit.reviewrequired && edit.oldtext) {
      oldest = edit.oldtext
    }
  })

  return oldest
})

const newBody = computed(() => {
  if (!props.editreview || !message.value || !message.value.edits) {
    return null
  }

  // Find the newest and oldest texts; intermediates are just confusing.
  // Edits are in descending time order.
  let newest = message.value.textbody

  message.value.edits.forEach((edit) => {
    if (edit.reviewrequired) {
      if (edit.newtext && !newest) {
        newest = edit.newtext
      }
    }
  })

  return newest
})

const duplicateAge = computed(() => {
  let ret = 31
  let check = false
  if (!message.value?.groups) return null

  message.value.groups.forEach((g) => {
    const grp = myModGroup(g.groupid)

    // console.log("duplicateAge group", group?.settings?.duplicates)
    if (
      grp &&
      grp.settings &&
      grp.settings.duplicates && // TODO: MT group does not have settings
      grp.settings.duplicates.check
    ) {
      check = true
      const msgtype = message.value.type.toLowerCase()
      ret = Math.min(ret, grp.settings.duplicates[msgtype])
    }
  })

  // console.log('checkHistory duplicateAge',check,ret)
  return check ? ret : null
})

const crossposts = computed(() => {
  return checkHistory(false)
})

const duplicates = computed(() => {
  return checkHistory(true)
})

const memberGroupIds = computed(() => {
  return fromUser.value?.memberships
    ? fromUser.value.memberships.map((g) => g.id)
    : []
})

watch(
  () => props.summary,
  (newVal) => {
    if (newVal && expanded.value) {
      expanded.value = false
    } else if (!newVal && !expanded.value) {
      expanded.value = true
    }
  }
)

// When expanding, force-fetch the full message to get all attachments.
// The list endpoint only returns the first image for performance.
watch(expanded, async (newVal) => {
  if (newVal && message.value?.id) {
    const fresh = await messageStore.fetch(message.value.id, true)
    if (fresh?.attachments) {
      attachments.value = fresh.attachments
    }
  }
})

watch(
  () => props.nextAfterRemoved,
  (newVal) => {
    if (message.value && newVal === message.value.id) {
      // This message is the one after one which has just been removed.  Make sure the top is visible.
      bottom.value.scrollIntoView()
      top.value.scrollIntoView(true)
    }
  }
)

watch(
  messageHistory,
  async (newVal) => {
    // We want to ensure that we have the groups for any message history, so that we can use them in canonSubj.
    // console.log('ModMessage: watch messageHistory',newVal)
    await newVal.forEach(async function (histMsg) {
      if (!historyGroups[histMsg.groupid]) {
        historyGroups[histMsg.groupid] = await modGroupStore.fetchIfNeedBeMT(
          histMsg.groupid
        )
      }
    })
  },
  { immediate: true }
)

onMounted(() => {
  expanded.value = !props.summary
  if (message.value) {
    attachments.value = Array.isArray(message.value.attachments)
      ? message.value.attachments
      : []
    findHomeGroup()

    // Fetch heldby user if message is held (Go API returns numeric ID).
    if (message.value.heldby && Number.isInteger(message.value.heldby)) {
      userStore.fetch(message.value.heldby)
    }
  }
})

onBeforeUnmount(() => {
  if (message.value) {
    emit('destroy', message.value.id, props.next)
  }
})

function updateComments() {
  // fromUser is a computed from userStore.byId, so it auto-updates when the store changes.
  // Force a re-fetch to get updated comments.
  if (fromUserId.value) {
    userStore.fetch(fromUserId.value)
  }
}

function imageAdded(id) {
  let ret = false

  if (props.editreview && message.value && message.value.edits) {
    message.value.edits.forEach((edit) => {
      const n = edit.newimages ? JSON.parse(edit.newimages) : []
      const o = edit.oldimages ? JSON.parse(edit.oldimages) : []
      if (n.includes(id) && !o.includes(id)) {
        ret = true
      }
    })
  }

  return ret
}

function imageRemoved(id) {
  let ret = false

  if (props.editreview && message.value && message.value.edits) {
    message.value.edits.forEach((edit) => {
      const n = edit.newimages ? JSON.parse(edit.newimages) : []
      const o = edit.oldimages ? JSON.parse(edit.oldimages) : []
      if (!n.includes(id) && o.includes(id)) {
        ret = true
      }
    })
  }

  return ret
}

function hasCollection(coll) {
  let ret = false

  if (message.value?.groups) {
    message.value.groups.forEach((grp) => {
      if (grp.collection === coll) {
        ret = true
      }
    })
  }

  return ret
}

function postcodeSelect(pc) {
  if (editing.value && editmessage.value) {
    editmessage.value.location = pc
  } else {
    message.value.location = pc
  }
}

function startEdit() {
  // Clone so that store refetches don't overwrite the edit state.
  editmessage.value = JSON.parse(JSON.stringify(message.value))
  editing.value = true
  miscStore.modtoolsediting = true
  editmessage.value.groups.forEach((grp) => {
    editgroup.value = grp.groupid
  })
}

async function save() {
  saving.value = true

  try {
    const attids = []

    if (Array.isArray(attachments.value)) {
      for (const att of attachments.value) {
        attids.push(att.id)
      }
    }

    if (editmessage.value.item && editmessage.value.location) {
      // Well-structured message
      await messageStore.patch({
        id: editmessage.value.id,
        msgtype: editmessage.value.type,
        item: editmessage.value.item.name,
        location: editmessage.value.location.name,
        attachments: attids,
        textbody: editmessage.value.textbody,
      })
    } else {
      // Not well-structured
      await messageStore.patch({
        id: editmessage.value.id,
        msgtype: editmessage.value.type,
        subject: editmessage.value.subject,
        attachments: attids,
        textbody: editmessage.value.textbody,
      })
    }

    let alreadyon = false

    editmessage.value.groups.forEach((g) => {
      if (g.groupid === editgroup.value) {
        alreadyon = true
      }
    })

    if (!alreadyon) {
      await messageStore.move({
        id: editmessage.value.id,
        groupid: editgroup.value,
      })
    }

    editing.value = false
    miscStore.modtoolsediting = false
  } finally {
    saving.value = false
  }
}

function settingsChange(param, val) {
  const params = {
    userid: fromUserId.value,
    groupid: groupid.value,
  }
  params[param] = val
  memberStore.update(params)
}

async function toggleMail() {
  showMailSettings.value = !showMailSettings.value

  if (showMailSettings.value && fromUserId.value) {
    // Get the user into the store for SettingsGroup.
    await userStore.fetch(fromUserId.value)
  }
}

function canonSubj(message) {
  let subj = message.subject
  if (!subj) subj = ''
  const grp = historyGroups[message.groupid]

  if (grp && grp.settings && grp.settings.keywords) {
    // TODO: MT group does not have settings
    const keyword =
      message.type === 'Offer'
        ? grp.settings.keywords.offer
        : grp.settings.keywords.wanted
    if (keyword) {
      subj = subj.replace(keyword, message.type.toUpperCase())
    }
  }

  if (subj.toLocaleLowerCase) {
    subj = subj.toLocaleLowerCase()

    // Remove any group tag
    subj = subj.replace(/^\[.*?\](.*)/, '$1')

    // Remove duplicate spaces
    subj = subj.replace(/\s+/g, ' ')

    subj = subj.trim()

    const matches = SUBJECT_REGEX.exec(subj)
    if (matches?.length > 2) {
      // Well-formed - remove the location.
      subj = matches[1] + ': ' + matches[2].toLowerCase().trim()
    }
  }

  return subj
}

function checkHistory(duplicateCheck) {
  const ret = []
  if (!message.value) return ret
  const subj = canonSubj(message.value)
  const dupids = []
  const crossids = []

  if (fromUser.value?.messagehistory) {
    fromUser.value.messagehistory.forEach((histMsg) => {
      if (
        histMsg.id !== message.value.id &&
        duplicateAge.value &&
        histMsg.daysago <= duplicateAge.value
      ) {
        // if( duplicateCheck) console.log('checkHistory check',histMsg)
        if (canonSubj(histMsg) === subj) {
          // No point displaying any group tag in the duplicate.
          histMsg.subject = histMsg.subject.replace(/\[.*\](.*)/, '$1')

          // Check whether there are groups in common.
          const groupsInCommon = message.value.groups
            .map((g) => g.groupid)
            .filter((g) => g === histMsg.groupid).length

          const key = histMsg.id + '-' + histMsg.arrival

          if (duplicateCheck && groupsInCommon) {
            // Same group - so this is a duplicate
            if (!dupids[key]) {
              dupids[key] = true
              ret.push(histMsg)
            }
          } else if (!duplicateCheck && !groupsInCommon) {
            // Different group - so this is a crosspost.
            if (!crossids[key]) {
              crossids[key] = true
              ret.push(histMsg)
            }
          }
        }
      }
    })
  }
  // if( duplicateCheck) console.log('checkHistory duplicateCheck',ret)
  return ret
}

function photoAdd() {
  // Flag that we're uploading.  This will trigger the render of the filepond instance and subsequently the
  // init callback below.
  uploading.value = true
}

async function findHomeGroup() {
  if (!message.value) return

  // Prefer nearby groups from the message API (computed from original unblurred coords).
  const msgGroups = message.value.location?.groupsnear
  if (msgGroups && msgGroups.length) {
    homegroup.value = msgGroups[0].namedisplay
    homegroupontn.value = msgGroups[0].ontn
    homegroupids.value = msgGroups.map((g) => parseInt(g.id))
    return
  }

  // Fallback: look up from (blurred) lat/lng via location API.
  if (message.value.lat && message.value.lng) {
    const loc = await locationStore.fetch({
      lat: message.value.lat,
      lng: message.value.lng,
    })

    if (loc && loc.groupsnear && loc.groupsnear.length) {
      homegroup.value = loc.groupsnear[0].namedisplay
      homegroupontn.value = loc.groupsnear[0].ontn
      homegroupids.value = loc.groupsnear.map((g) => parseInt(g.id))
    }
  }
}

function cancelEdit() {
  editing.value = false
  miscStore.modtoolsediting = false

  // Fetch the message again to revert any changes.
  messageStore.fetch(message.value.id)
}

async function backToPending(callback) {
  await messageStore.backToPending(message.value.id)
  callback()
}

function spamReport() {
  showSpamModal.value = true
  spamConfirm.value?.show()
}
</script>

<style scoped lang="scss">
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import 'bootstrap/scss/mixins/_breakpoints';
//@import 'color-vars';

.type {
  max-width: 150px;
}

.location {
  max-width: 250px;
}

.item-name-input {
  /* Cap growth on wide desktop so the field doesn't stretch the whole row.
     flex-grow-1 keeps it filling available space up to this cap. */
  max-width: 500px;
}

.fullsubject {
  display: grid;
  grid-template-columns: 200px 1fr;

  grid-column: 2 / 3;

  label {
    grid-column: 1 / 2;
  }

  @include media-breakpoint-down(md) {
    grid-template-columns: 1fr;
  }
}

.addedMessage,
.removedMessage {
  display: none;
}

.addedImage {
  border: 1px solid $color-green--dark !important;

  .addedMessage {
    display: block !important;
  }
}

.removedImage {
  border: 1px solid $color-red--dark !important;

  .removedMessage {
    display: block !important;
  }
}
</style>

Freegle / Iznik / 22372

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous